学习、工作和狗粮

使用Hexo搭配Github Pages来做笔记本

2018/01/20 Share

岁数大了,要做的事情还很杂,很多东西也需要记下来,但是mac上面还真没有找到一个“稳定好用的记事本”。所以干脆就用用Hexo搭配Github做这个博客。

下面是一些搭建时候的记录,以备有需要的话查看;

Hexo 官方链接

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

看文档

首先扫了一遍Hexo的官网内容,然后去到主题专区,挑了当前的Apollo主题;

开搞

我们先不用考虑在哪里写东西,先把东西整出来,关联到github之后再来写不辞,不然没有折腾的赶脚嘛。

先决条件:

安装了git;

安装了node前端开发环境;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 安装hexo
npm install hexo-cli -g

# 或者,使用npx替代全局安装
npx hexo-cli [执行的命令]

# 初始化基础的hexo项目(结构),相关目录可以参考官方解释,不过不用太关注,hexo我觉得分为两点,官方帮我们解决了博客的渲染(markdown2html),而又提供了一个口子给大家去提供主题、插件,这就是他小而精的地方,不过还有一个[QingWei-Li/docsify](https://github.com/QingWei-Li/docsify),不过后者用来做文档比较适合;)
hexo init <folder>
cd <folder>
npm install

# 安装主题
# 以[Apollo](https://github.com/pinggod/hexo-theme-apollo)主题为例
# 写到这里才发现作者有[演示](https://asciinema.org/a/emrvroa9054hz6k8ise0uxh2u),大家看看演示就行了,我继续

# 安装插件依赖
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

# clone插件项目到本地项目的主题目录下面
git clone https://github.com/pinggod/hexo-theme-apollo.git themes/apollo

# 修改主配置_config.yml 的 theme 配置项为 apollo:

theme: apollo

# 在归档页面显示所有文章
# 需要上面安装的 hexo-generator-archive 插件支持
archive_generator:
per_page: 0
yearly: false
monthly: false
daily: false

# 更新
cd themes/apollo
git pull

搞了一半天先在本地看看效果

1
2
3
4
5
6
7
8
9
# 清除缓存
hexo clean
# 生成静态文件
hexo g
# 启动服务器。默认情况下,访问网址为: http://localhost:4000/。
hexo server

# 或者
hexo clean && hexo g && hexo s

部署到Github

首先:
创建一个[你的github用户名,记住这里必须是你的用户名].github.io的public仓库,因为User, Organization, and Project Pages

User & Organization Pages live in a special repository dedicated to GitHub Pages files. You will need to name this repository with the account name.

You must use the username.github.io naming scheme.
Content from the master branch will be used to build and publish your GitHub Pages site.
You can only use your own account name for a User or Organization Page repository. A repository like joe/bob.github.io will not build a User Pages site.

When User Pages are built, they are available at http(s)://.github.io.

比如这个仓库的地址就是:Jiiiiiin/Jiiiiiin.github.io & git@github.com:Jiiiiiin/Jiiiiiin.github.io.git,那么:

1
2
3
4
5
6
7
8
9
10
11
# 安装deployer-git
npm install hexo-deployer-git --save
# 修改deploy配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:Jiiiiiin/Jiiiiiin.github.io.git
branch: master

# 运行一下命令将Hexo上传到Github
hexo g && hexo d

最后键入域名:https://[你的github用户名].github.io 就可以访问啦。

其他的,我下来折腾一下在记录,如果有好玩的;

更新:

绑定域名

  • 先到域名供应商的管理页面,设置:

    像图上所示添加两条解析:
    1.记录类型是CNAME对应[github用户名].github.io
    2.记录类型是A类对应[github用户名].github.io ping之后得到的ip

  • 接着去github项目setting设置:

  • 最后到项目blog/source下创建:

完成以上三步之后,hexo clean && hexo g && hexo d,重新打包部署即可。

相关资料

Hexo官方

GitHub Pages官方HelloWorld

GitHub+Hexo 搭建个人网站详细教程

插件其他可以做的

设置github个人网站页使用https访问

使用 submodule 管理 Hexo 主题

使用 Git Hook 自动部署 Hexo 到个人 VPS

Hexo 踩坑 - 不要在标题开头使用方括号

设置disqus评论

遇到的问题

deploy之后仓库里的历史文件都被删除 #42

常用命令

1
2
3
4
5
6
7
8
9
10
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令
CATALOG
  1. 1. Hexo 官方链接
  2. 2. 看文档
  3. 3. 开搞
  4. 4. 搞了一半天先在本地看看效果
  5. 5. 部署到Github
  6. 6. 绑定域名
  7. 7. 相关资料
  8. 8. 遇到的问题
  9. 9. 常用命令