花了一个晚上＋一下午的时间终于把个人网站做好了。外行人做东西就是难，只能照葫芦画瓢，反正最后解决了就行。下次也不一定做的出来了哈哈哈哈趁着自己还没忘赶紧留个档。

1.前期准备

想要搭建服务器首先需要把环境配置好

1
2
3
#Hexo官网：https://hexo.io/zh-cn/index.html
#Git 官网: https://git-scm.com/
#Node.js官网：https://nodejs.org/zh-cn/

安装完Node.js后打开cmd输入node -v查看版本号检查是否安装成功

2.部署HEXO

打开一个文件夹，右键鼠标选择Git Bash Here

依次输入代码

1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo s

这时代码跑完，以及有本地网页了，通过http://localhost:4000/ （每个人端口号可能不一样）即可访问

创建新网页使用代码

1
hexo new "新网页的名称"

之后在blog文件夹中的\source\_posts即可访问

hexo的常用命令：

1
2
3
4
hexo cl #删除public文件夹
hexo g #生产public文件夹
hexo s #在本地启动服务
hexo d #在本地生成.deploy_git文件夹，并将编译后的文件上传至 GitHub

3.更改网站样式

进入hexo官网底部点击探索主题

选择一个喜欢的样式点进作者的Github中学习怎样部署

以我选择的Maple为例：

在blog文件夹中右键鼠标选择Git Bash Here

直接输入代码即可：

1
git clone https://github.com/xbmlz/hexo-theme-maple.git themes/maple

之后在blog中找到_config.yml

1
2
- theme: some-theme //把这个
+ theme: maple //改成这个

之后在blog\themes\maple中通过_config.yml修改相关细节

4.发布到Github

先在自己的Github创建一个新的 repository命名为：<username>.github.io

创建完新的 repository后会有 HTTPS/SSH 地址，我们选择git地址如：

https://github.com/your_username/your_reponame.git

直接对着任意地方右键鼠标选择Git Bash Here

安装部署插件

1
2
npm install hexo-deployer-git --save
npm install hexo-server --save

接着配置一下Git

1
2
git config --global user.name "Your_user_name"
git config --global user.email Your_email@example.com

再输入：

1
2
ssh-keygen -t rsa -C "Your_email@example.com"
#按回车就完事了

然后输入以下代码获取密钥：

1
cat ~/.ssh/id_rsa.pub

得到一大串长长的密钥，回到Github中进入设置、SSH

点击New SSH key随便取个名然后粘贴进去就行了，可能会让输入密码，都比较简单。

之后回到Git窗口验证是否成功

1
2
ssh -T git@github.com
#出现Successfully就完事了

回到blog根目录中找到_config.yml输入与自己账号对应内容

1
2
3
4
5
6
7
8
9
10
11
12
  # URL
  # If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  url: https://<username>.github.io #这里输入刚刚设置的网站
  root: /
  permalink: :year/:month/:day/:title/
  permalink_defaults:
 # Deployment 
 ## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git          
  repo: https://github.com/<username>/<username>.github.io.git  #这里把username换了对着输入就行
  branch: main #注意github的默认branch换成了main，要把master改为main才行

设置好之后直接在blog根目录右键鼠标选择Git Bash Here

1
2
hexo d
#即可把本地网页部署到Github

OK，到这一步直接输入之前设置的：<username>.github.io

是不是就能看到自己的网站了？

5.开启评论系统

评论系统在我的主题中是基于Giscus实现的

想要使用Giscus需要满足以下条件:

  • 仓库公开
  • Giscus已安装
  • Giscus功能对仓库启用

满足后进入Giscus官网

在仓库中输入blog在Github的仓库名如myusername/myrepo

此处直接复制会有俩空格导致不符合，一定注意下，我在这边吃亏找了一个多小时解决方法。。。

下面建议选择URL

然后直接将Giscus给你的配置复制到主题的设置文件中即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

6.多端同步

多端同步使用Github的分支系统实现

每次同步本地到Github其实只会同步.deploy_git文件夹内的东西，源文件并没有上传

现在Github中创建一个branch命名为hexo

接着在你的仓库设置里把hexo改为默认分支

在任意目录下右键鼠标选择Git Bash Here

1
git clone git@github.com:<username>/<username>.github.io.git

把hexo的内容clone到本地，之后在本地<username>.github.io文件夹中把除了.git之外的文件都删了

然后把之前网站的源文件除了.deploy_git全部复制过来就行了，另外主题文件夹中的.git需要删掉

复制过来的源文件应该有一个.gitignore，用来忽略一些不需要的文件，如果没有的话，自己新建一个，在里面写上如下，表示这些类型文件不需要git：

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

复制好之后直接在这个文件夹中右键鼠标选择Git Bash Here

1
2
3
git add .
git commit –m "add branch"
git push

这样hexo分支里应该都上传上了源文件。其中node_modules、public、db.json已经被忽略掉了，没有关系，不需要上传的，因为在别的电脑上需要重新输入命令安装 。

之后每次写完都记得同步一下：

1
2
3
4
5
6
hexo cl
hexo g
hexo d
git add .
git commit –m "..."
git push

后面需要在别的电脑上下载文件只需要以下步骤：

  • 安装git
1
sudo apt-get install git
  • 设置git全局邮箱和用户名
1
2
git config --global user.name "Your_user_name"
git config --global user.email Your_email@example.com
  • 设置ssh key
1
2
3
ssh-keygen -t rsa -C "youremail"
#验证是否成功
ssh -T git@github.com
  • 安装nodejs
1
2
sudo apt-get install nodejs
sudo apt-get install npm
  • 安装hexo
1
sudo npm install hexo-cli -g

但是已经不需要初始化了，

直接在任意文件夹下，

1
git clone git @………………

然后进入克隆到的文件夹：

1
2
3
cd xxx.github.io
npm install
npm install hexo-deployer-git --save

生成，部署：

1
2
hexo g
hexo d

然后就可以开始写你的新博客了

1
hexo new newpage

Tips:

  1. 不要忘了，每次写完最好都把源文件上传一下
1
2
3
git add .
git commit –m "xxxx"
git push
  1. 如果是在已经编辑过的电脑上，已经有clone文件夹了，那么，每次只要和远端同步一下就行了
1
git pull

7.遇到的问题

Tags与Categories页面不显示

在blog文件夹中右键鼠标选择Git Bash Here

1
hexo new page tags #新建tags页面

然后会在hexo下的source目录看到tags文件夹，在index.md里输入

1
2
3
4
5
6
---
title: tags
date: 2020-01-10 16:14:33
type: "tags"
layout: "tags"   //增加tags的布局
---

然后再用同样的方法，新建一个categories

1
hexo new page categories #新建categories页面

然后配置categories 文件夹下的index.md

1
2
3
4
5
6
---
title: categories
date: 2020-01-10 16:15:43
type: "categories"
layout: "categories"    //增加categories的布局
---

另外如果不想要每次新增文章都要输入一次categories与tags，可以修改scaffolds/post.md

1
2
3
4
title: {{ title }}
date: {{ date }}
categories: {{ categories }}
tags: {{ tags }}

写文章时对于categories与tags的定义如下：

1
2
3
4
5
6
---
title: 标签
date: 2018-10-10 12:21:48
categories: [分类] //注意分类只能有一个
tags: [tag1，tag2] //中间用英文逗号隔开
---

部署后，部分页面 404

部分情况下，在初次部署之后，部分文章或者页面路径大小如果更改了，会导致新部署上去的页面出现 404 错误。 这是由于Git没有区分大小写导致的文件路径错误。修改hexo根目录/.deploy_git/.git/下的config文件

1
2
3
4
5
6
7
8
9
10
11
[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = false
	symlinks = false
-	ignorecase = true
+   ignorecase = false
[branch "master"]
	remote = ueser_name@HostIP:/var/repo/blog.git
	merge = refs/heads/master

我用以上方法没解决，最后通过删除hexo目录下的.deploy_git文件夹后重新部署解决。

参考：

https://www.bilibili.com/video/BV1ts4y1f7Gu

https://www.bilibili.com/video/BV1cW411A7Jx

https://www.zhihu.com/question/21193762/answer/489124966

https://blog.csdn.net/yinjiangQAQ/article/details/103951416

https://kemushi54.github.io/

https://xring.net/

https://easyhexo.com/