本文介绍一种基于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

使用自有域名

  1. 万网或godaddy购买域名,由于国内备案麻烦谨慎购买.cn域名,除.com常见的域名有.cc,.me,.top,.club等。
  2. 万网域名自动使用hichina云解析(若使用godaddy,为了加快解析速度,防止被墙,可将 DNS 服务器可设置为为DNSPod)
  3. 添加两条解析,使得访问“xxx.com”和“www.xxx.com”时均能够解析域名
    主机记录@,记录类型CNAME,解析线路默认,记录值littlepeanut.github.io.,TTL1小时;主机记录www,记录类型A,解析线路默认,记录值185.199.109.153,TTL1小时(主机IP可直接ping域名得到)
  4. 今后可根据需要添加二级域名
  5. 在博客中source和public中添加CNAME,记录域名littlepeanut.top,将本地和Github Page上的Hexo绑定到自有域名
  6. 若在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项目的分支中。

  1. 在网页端添加hexo分支,并将其设置为主分支,在切换到hexo分支后
  2. 将项目clone到本地,取出clone的项目的.git文件夹放到博客的根目录下
  3. 将代码上传到hexo分支中
$ git checkout hexo
$ git add .
$ git commit -m "update my blog source code"
$ git push origin hexo
分类: 博客

0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注