Hello World! 静态博客Hexo部署于GitHub

某网站注册不能用免费邮箱,一时冲动买了个域名来弄企业邮箱,另外也配合ngrok做内网穿透。只是这样的话有点浪费,于是顺便搭个静态博客来玩。

就需求来说,个人笔记以前用evernote就足够了,协作,共享都能实现,手机端操作十分方便。但私人笔记记录比较随意,注释都没几条,时间久了按步骤复现没问题,但背后原理难免有点模糊。发到博客上则能强制自己写仔细认真些。

静态博客平台比较

首先要按需求和前置技能选一个合适的平台,以下结论是google得来,除了Hexo另外两个并未亲自尝试,所以并不靠谱。以后有空会都试试再详细对比。

Jekyll (JB, octopress)

👍Github原生支持
👍插件众多
👎页面生成效率低
👎ruby搭建环境对win不友好

Hugo

👍GO编写,性能强大,页面生成效率极高
👍依赖少,单个可执行文件搭建环境简单
👎扩展性差

Hexo

👍Node.js,搭建环境相对简单
👍扩展性强
👍页面生成效率不及Hugo,但远超Jekyll
👎社区偏小

由上可见性能和扩展性折中的Hexo更合适我个人使用。

环境搭建

Git

Node.js

通过nvm安装nodejs。win版nvm

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

重启终端,然后安装node.js

1
nvm install stable

若访问npmjs.org过慢,可换npmmirror的源

1
npm config set registry https://registry.npmmirror.com

注册GitHub账号

配置SSH keys

1
$ cd ~/.ssh

若提示No such file or directory则需生成新Key

1
$ ssh-keygen -t rsa -C "youremail@youremail.com"

passphrase为每次提交项目输入的口令,若不想每次都输入的话可以通过ssh-agent来保存

1
2
3
cd
touch .profile
vim .profile #添加启动代码

复制~\.ssh\id_rsa.pub的内容到Github Settings
注:Windows环境变量
测试ssh

1
$ ssh -T git@github.com

设置用户信息

1
2
$ git config --global user.name "你的姓名"	#不是用户名
$ git config --global user.email "你的邮箱"

部署Hexo

安装hexo

1
$ npm install -g hexo-cli

建立新文件夹,在bash中指向这个文件夹

1
2
3
4
$ hexo init
$ npm install
$ hexo generate #生成静态页面至public目录
$ hexo server #http://localhost:4000 查看效果

安装主题

这里选用的是luuman的SPFK

1
$ git clone https://github.com/luuman/hexo-theme-spfk.git themes/spfk

配置

修改以下文件

/_config.yml

Site部分
url
theme: spfk
Deployment部分

1
2
3
4
deploy:
type: git
repository: git@github.com:username/username.github.io.git
branch: master

/themes/spfk/_config.yml

启用youyan,注释掉另外两个
friends部分,添加友链
站长验证
流量统计

/themes/spfk/source/img

替换favicon.png, head.jpg, alipayimg.jpg, wechatimg.jpg, apple-touch-icon.png

部署到GitHub

1
$ hexo d

定制域名(可选)

域名为二级域名(example.com)

在public目录添加CNAME,内容为域名地址。
到DNS服务商处更改解析:添加A记录指向185.199.108.153

域名为三级域名(blog.example.com)

在public目录添加CNAME,内容为域名地址。
到DNS服务商处更改解析:添加CNAME记录指向YOURNAME.github.io

常用插件

备份博客

由于部署在github上的是public文件夹的内容。故文章源码,博客配置文件等仍需另行备份,这里用的是hexo-git-backup
github中新建一个私有仓库,如blog-backup
安装插件。

1
npm install hexo-git-backup --save

_config.yml文件最后添加以下内容。

1
2
3
4
5
backup:
type: git
theme: landscape,spfk
repository:
github: git@github.com:YOURNAME/blog-backup.git,master

执行备份上传。

1
hexo b

参考资料

Hexo Docs
使用GitHub搭建Hexo博客

文章目录
  1. 1. 静态博客平台比较
    1. 1.1. Jekyll (JB, octopress)
    2. 1.2. Hugo
    3. 1.3. Hexo
  2. 2. 环境搭建
    1. 2.1. Git
    2. 2.2. Node.js
    3. 2.3. 注册GitHub账号
    4. 2.4. 配置SSH keys
  3. 3. 部署Hexo
    1. 3.1. 安装主题
    2. 3.2. 配置
      1. 3.2.1. /_config.yml
      2. 3.2.2. /themes/spfk/_config.yml
        1. 3.2.2.1. /themes/spfk/source/img
    3. 3.3. 部署到GitHub
    4. 3.4. 定制域名(可选)
      1. 3.4.1. 域名为二级域名(example.com)
      2. 3.4.2. 域名为三级域名(blog.example.com)
  4. 4. 常用插件
    1. 4.1. 备份博客
  5. 5. 参考资料
,