客至汲泉烹茶, 抚琴听者知音

githubpages+hexo搭建一个静态网站

环境配置

git安装以及绑定github

git官方地址

下载完成后,右键会有个git bash选项,点击后输入git -v看安装是否成功。

  • 右键唤出 Git Bash,设置 user.name 和user.email 配置信息:
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
  • 生成ssh密钥文件:
cd ~/. ssh #检查本机已存在的ssh密钥,第一次肯定提示没有找到
ssh-keygen -t rsa -C "邮件地址"   # 生成密匙,连按三次回车最后在C:\Users\51445中生成一个.ssh文件夹
cat .ssh\id_rsa.pub  # 显示你的密匙
  • 绑定github

复制上述步骤生成的密匙,到github个人主页->setting-> SSH and GPG keys -> New SSH key,title随意填

  • 测试是否成功连接
ssh git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:

Hi Bitnut! You've successfully authenticated, but GitHub does not provide shell access.

这样就绑定成功了。

安装Node.js

由于 Hexo 基于 Node.js 因此我们到官网上下载一下 node.js。

Node.js下载地址:Download | Node.js
下载安装包,安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,在命令行中输入 node -v 检测npm是否安装成功。

如果 git bash 里面报错,到环境变量里面看看有没有 nodejs。没有的需要把nodejs的地址添加一下。如果已经有了,重启电脑应该就 OK。

至此,安装Hexo的环境全部配置完成。

创建github仓库

仓库的名字设定为:自己注册时的用户名 +.github.io

例如

我的用户名为:caly5144
那么我的仓库名字就是:caly5144.github.io

可见这个仓库是每个账号只能创建一个的特殊类型仓库

另外初始化README必须勾选。

Hexo

安装

npm install -g hexo-cli  # 右键bash,安装hexo
hexo init wiki   # 初始化项目,这里是在当前文件夹中新建了一个wiki站点,所以最好在选定的文件夹中执行该命令

问题:提示bash: hexo: command not found

解决方案:输入npm root -g查看包安装路径,然后将该命令添加到环境变量中

为了检测我们的网站雏形,分别按顺序输入以下三条命令:

hexo new test\_my\_site #创建一篇新文章  
hexo g #生成文件  
hexo s #本地 server 部署

这样我们在本地成功部署了我们的博客,打开浏览器输入地址:localhost:4000,查看你刚刚建立的网页

常用的Hexo 命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写

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 #清除缓存,若是网页正常情况下可以忽略这条命令

刚刚的三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。

部署到 Github 上

上面只是在本地预览,接下来要做的就是就是推送更新,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,

需要区分一下两个概念:

  • 在 wiki 根目录里的_config.yml文件称为站点配置文件
  • 进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件

下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:

deploy:
  type: git
  repo: git@github.com:caly5144/caly5144.github.io.git # 这里填入你之前在GitHub上创建仓库的完整路径
  branch: master

保存站点配置文件,接着在网站根目录下安装git插件

npm install hexo-deployer-git --save  # 安装Git部署插件

以上的所有操作其实是在给 hexo d 这个命令做相应的配置,让 hexo 知道你要把 blog 部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。

完成后,在网站根目录wiki下分别输入三条命令:

hexo clean
hexo g
hexo d

第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io 。其中的 xxxx 就是的GitHub用户名:你就会发现你的博客已经上线了,可以在网络上被访问了。

打开我们的github库,你会发现里面只有.deploy_git中的文件。这样就很清晰了,source负责写原始文件(md文章等),hexo把它们渲染成html等文件并放到.deploy_git,然后上传到github并展示。

更换主题

以wiki主题written为例,在根目录唤出 Git Bash,

git clone https://github.com/zthxxx/hexo-theme-Wikitten.git themes/Wikitten
如果中间更换pandoc引擎出错,尝试换成npm install hexo-renderer-pandoc --save命令

这是将written主题下载到 Blog 目录的 themes 主题下的written 文件夹中。打开站点的_config.yml配置文件,将里面的 theme: landscape 改为 theme: written,然后照着README进行相关的配置,最后重新执行 hexo g 来重新生成。

如果出现一些莫名其妙的问题,可以先执行 hexo clean ,可以清理 public 文件夹里面的内容。然后重新生成和发布即可。

written 主题及hexo的一些坑

  • 关于这个主题,两个以上分类才会显示侧边栏。
  • 当你想要开启history功能时,首先想到的就是新建一个库,然后把sourcepush上去,但是设置好后会发现history跳转错误,原因就是地址中多了一个/source,我们传的只是这个文件夹,并不包括它的上级目录。可以在\themes\Wikitten\layout\common\article.ejs中找到${theme.history_control.branch}/source/${post.source},删去/source,这样就可以显示正常。这样做是为了方便地使用githubdesktop进行管理。
  • 另外,如果你不知道项目该上传到哪个库中,去repository settings中看看

  • about页面在根目录的source下就可以填,类似的,站点图标也应该放到这儿
  • 链接栏目需要在主题目录的_config.yml,向下拉倒最后一行找到links:,然后在后面填写字典数据,格式为{名称: 链接},多个链接以逗号分隔,如:
links: {blog: https://sitstars.com, 工具: https://tool.sitstars.com}
  • 如果传某篇文章报错
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
Error: expected end of comment, got end of file

看是否存在以下字符:#{#{{{}},它和hexo内置语法冲突的。

解决方法有二:一是用代码块包裹,而是加个空格,比如{ {,这样是允许的。

绑定域名

在github的仓库中添加一个CNAME的文本文件,把你的域名添加进去(我的是wiki.sitstars.com),然后在Setting中拉倒githubpages上,填入Custom domain,也即你的域名

然后再解析一个CHAME到caly5144.github.io上,就可以通过自定义域名访问了。

但是这样每次更新文章的时候,会将CNAME覆盖掉,解决方案是直接把 CNAME 文件添加到 本地的source 文件夹里。

启用https

只需要更新 DNS 配置里的 A 记录,将其指向以下4个 IP 地址中的至少一个。

185.199.108.153

185.199.109.153

185.199.110.153

185.199.111.153

HTTPS 让你的网站和网站访客更安全,并且 Github 提供的这些 IP 地址自动将你的站点加入了 CDN,提高了访问速度。

过一段时间,你会发现Custom domain下面的Enforce HTTPS可以勾选了,选上它就能让所有访问你站点的请求通过https访问。

但是又出现了新的问题:我原本直接解析的博客地址(sitstars.com)就打不开了……没办法又去掉了github的A解析,好了博客能打开了,githubpage也没挂掉……大概

实在不太懂,建议大家如果解析的是子域名(不是www),那先试试解析CNAME,看能不能访问,千万不要直接解析一个@的A记录,要不然有得折腾。

[scode type="lblue"]12月18日更新:我换了个域名econ.wiki,这次直接解析A记录,无需CNAME,填写自定义域名之后等待一会强制开启https[/scode]

写文章

在/source/_posts中新建md文档,然后书写,记得要加开头

---
title: article
toc: true
date: 2019-10-07 02:32:43
tags:
categories: 
---

也可以hexo new 'article'生成一篇markdown文章,自动生成开头

设置多级分类和标签

[tag1, tag2, tag3, ...]  # 多标签
categories:   # 多级分类
- tags_level_1
- tags_level_2
- tags_level_3

不妨不同分类放到不同目录,比较清晰

然后hexo g -d

添加新评论