本文介绍一种基于Hexo框架和Github Page服务搭建博客的方法,其中还将原始的Github page指向了自有域名。
Page服务配置
将静态网页同时部署到Github和国内coding
Github
安装git,ssh
$ sudo apt-get install git
$ sudo apt-get install ssh
配置git用户名和邮箱
$ git config --global user.name "your name"
$ git config--global user.email "your email"
配置SSH,参考 ,如下:
创建SSH key
$ ssh-keygen -t rsa -b 4096 -C "your email"
将~/.ssh/id_rsa.pub内容添加到Github-Setting-SSH keys
验证github SSH连接
$ ssh -T git@github.com
more Info Github SSH文档.
配置完Github后,创建Github库xxx.github.io,其中Github Page库的名称必须为xx.github.io
Coding
Coding是国内的代码托管网站,部署到coding可以避免博客访问速度不稳定等问题,注册登录Coding,为了方便,建立github中的同名项目,在项目-构建与部署-静态网站中开启服务,并绑定到自有域名。同时在自有域名解析中添加一条新的CNAME,指向coding page生成的网址。
在博客_config.yml配置文件中同时配置github和coding部署,如:
deploy:
- type: git
repo: git@github.com:feiwww/littlepeanut.github.io.git
branch: master
- type: git
repository: git@e.coding.net:wangfeiabn/wangfeiabn.git
branch: master
同时配置SSH
使用ssh地址+配置SSH公钥可以实现部署时不需要输入密码
生成SSH公钥:
$ ssh-keygen -t rsa -C "your email"
在生成SSH时会提示选择保存路径可以量Github和coding的公钥都保存在~/.ssh目录下,并重命名coding公钥为“my-coding”,并在.ssh/下新建配置文件
touch ~/.ssh/config
配置文件具体内容如下:
# github
Host github
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
User feiwww
# coding
Host coding
HostName git.coding.net
PreferredAuthentications publickey
IdentityFile ~/.ssh/my-coding
User wangfeiabn
使用自有域名
- 万网或godaddy购买域名,由于国内备案麻烦谨慎购买.cn域名,除.com常见的域名有.cc,.me,.top,.club等。
- 万网域名自动使用hichina云解析(若使用godaddy,为了加快解析速度,防止被墙,可将 DNS 服务器可设置为为DNSPod)
- 添加两条解析,使得访问“xxx.com”和“www.xxx.com”时均能够解析域名
主机记录@,记录类型CNAME,解析线路默认,记录值littlepeanut.github.io.,TTL1小时;主机记录www,记录类型A,解析线路默认,记录值185.199.109.153,TTL1小时(主机IP可直接ping域名得到) - 今后可根据需要添加二级域名
- 在博客中source和public中添加CNAME,记录域名littlepeanut.top,将本地和Github Page上的Hexo绑定到自有域名
- 若在Github Page中使用自有域名,一般在一天后才能在库的Setting中开启HTTPS
Hexo使用
Hexo是一个常见的静态博客框架.
首先参考 Hexo中文文档安装Hexo,注意文档中提到在安装时尽量不要使用sudo
安装npm和Node.js,验证
$ node -v
$ npm -v
$ npx -v
下面初始化博客
$ hexo init myblog
安装git管理扩展
$ npm i hexo-deployer-git
新建文章,存放在~/source/_posts
$ hexo n "article title" == hexo new "article title"
生成静态网页
$ hexo g
启动服务,可本地预览
$ hexo s
部署
hexo d
修改配置文件_config.yml,首先更改url和root,若不修改,即使在本地服务网页能够正常显示,部署后仍无法识别css等文件,具体修改规则如下:
如果域名是https://xxx.com:
url: https://xxx.com/
root: /
如果域名是https://xxx.com/blog:
url: https://xxx.com/blog
root: /blog
如果域名是https://yourID.github.io/blog:
url: https://yourID.github.io/blog
root: /blog
如果域名是https://yourID.github.io:
url: https://yourID.github.io/blog
root: /yourID.github.io/
同样还须在_config.yml中设置部署的git库地址
deploy:
type: git
repo: https://github.com/feiwww/littlepeanut.github.io.git
branch: master
其他常用Hexo命令
$ npm update hexo -g #升级
$ hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
$ hexo server -s #静态模式
$ hexo server -p 5000 #更改端口
$ hexo server -i 192.168.1.1 #自定义 IP
$ hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令
在一般情况下更新博客时,重新生成下静态博客并部署到Github上即可,使用的操作如下:
$ hexo clean
$ hexo g
$ hexo d
使用Bentech主题效果如下所示。
备份博客源代码
使用hexo d将hexo部署到Github Page中后,只是将静态博客上传,并没有保存博客的源代码,为了方便在不同终端电脑上对博客格式和内容进行修改,这里将博客所有源代码同时保存到Github中,具体是将源代码保存到我们GIthub Page项目的分支中。
- 在网页端添加hexo分支,并将其设置为主分支,在切换到hexo分支后
- 将项目clone到本地,取出clone的项目的.git文件夹放到博客的根目录下
- 将代码上传到hexo分支中
$ git checkout hexo
$ git add .
$ git commit -m "update my blog source code"
$ git push origin hexo