页面

分类

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

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

版权属于：作者名称

本文链接：https://www.sitstars.com/archives/36/

转载时须注明出处及本声明

标签： github hexo

添加新评论