使用 github pages 搭建 blog

创建一个仓库

打开 GitHub 并创建一个名为 username.github.io 的新存储库,其中 username 是您在 GitHub 上的用户名(或组织名称)。

安装git并生成SSH秘钥

安装 git bash,生成秘钥

1
ssh-keygen -t rsa -f ~/.ssh/id_rsa -N ''

查看秘钥

1
cat ~/.ssh/id_rsa.pub

添加至github

创建首页

创建首页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
mkdir /c/blog
cd /c/blog
cat > index.html <<EOF
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
EOF

git init
git config --global user.email "houshiying@vip.qq.com"
git config --global user.name "Hsy"
git add index.html
git commit -m "first commit"
git remote add origin git@github.com:opspy/opspy.github.io.git
git push -u origin master

访问你的站点 http://opspy.github.io , 替换 opspy 为你的域名

1
curl  -sL http://opspy.github.io/

添加域名

添加顶级域

添加顶级域名 example.com, 对应解析类型为ALIASANAMEA,看你的代理商支持哪一种,以下为配置 A记录的方法:

第一步:通过dig命令获取到IP

1
dig -t A opspy.github.io

第二步:通过 ANSWER SECTION, 我们拿到的 IP 为 151.101.73.147,之后去你的域名后台添加对应的解析记录

第三步: 进入你的仓库,点击setting 按钮,下拉到github pages , 并设置 Custom domainCustom domain 一栏

现在可以直接使用 http://opspy.com/ 进行访问了

添加 www 子域

在做完上一步操作之后,回到仓库可以发现有一个CNAME的文件,里面记载着我们刚刚设置的顶级域名,之后我们添加www域名,打开git bash登录我们刚才创建的git 仓库

1
2
3
4
5
6
cd /c/blog/
git pull
sed -i '$awww.opspy.com' CNAME
git add .
git commit -m "add www domain"
git push origin

之后我们登录域名解析后台,添加一条新的记录

此时可以使用 http://www.opspy.com/ 进行访问,他会自动跳转至 http://opspy.com/

Hexo

快速初始化

首先安装 node.js ,之后使用如下命令快速搭建 demo 环境,

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

完成之后生成目录如下

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

生成静态页并部署至 github

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

之后在 _config.ymldeploy 字段支持多种部署方式,使用 git 进行部署

1
2
3
4
5
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]

使用 generate 生成静态页面,--deploy 根据配置文件中的 deploy 字段进行部署

1
hexo generate --deploy

jekyll

github pages 直接支持 jekyll 解析, 不需要像 hexo 那样先转换成静态页面,再提交。

安装ruby

Windows安装,步骤省略

快速初始化

1
2
3
4
5
6
gem install bundler
gem install jekyll
cd /c
jekyll new myblog
cd myblog
jekyll serve

如果有如下提示

1
jekyll 3.5.1 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

则需要在 _config.yml 中指定端口

1
port: 15001

访问 http://localhost:15001/

在 github 展示 Jekyll

1
2
3
4
5
6
7
cd /c/blog
cp -a /c/myblog/* .
git rm index.html
git add .
git status -s
git commit -m "Add Jekyll Blog"
git push origin master

更换主题

选择一款觉得不错的主题,整个仓库git clone下来更换之

Hugo

安装 hugo

Linux 安装

1
2
3
wget https://github.com/gohugoio/hugo/releases/download/v0.32.4/hugo_0.32.4_Linux-64bit.tar.gz
tar xf hugo_0.32.4_Linux-64bit.tar.gz
mv hugo /usr/local/bin/

Windows 安装

下载 https://github.com/gohugoio/hugo/releases/download/v0.32.4/hugo_0.32.4_Windows-64bit.zip,并添加环境变量

生成站点

使用如下命令快速生成站点:

1
hugo new site blog

生成站点目录如下

1
2
3
4
5
6
7
8
9
blog/
├── archetypes
│ └── default.md
├── config.toml #主配置文件
├── content
├── data
├── layouts
├── static
└── themes

安装主题

本人使用主题 hugo-nuo

1
2
cd themes
git clone https://github.com/laozhu/hugo-nuo

配置主题

config 配置文件为 config.toml,根据自己需要进行修改

进入 blog 目录,并启动本地预览

1
hugo server –watch

创建文章

复制 exampleSite 下的目录至 blog 主目录,根据示例文章修改