获得Github主页

仓库设置

1. 打开github，新建一个新的仓库，仓库名设置为：你的用户名.github.io。假设我叫小明，就设置为xiaoming.github.io。

1. 不要勾选readme.md
2. 打开这个空仓库，点击setting。
3. 滚动页面至下方Github Pages处，选择Choose a theme来为你这个仓库创建网页。如果你有自己的域名，可以在Custom domain处用你自己的域名来替代xiaoming.github.io
4. 随便选择一个主题，过大约5分钟之后你就可以输入你的这个仓库名来访问主页了。

Hexo设置

Node.js安装

Node-js官网：点这进入

对于绝大部分Linux发行版用户，在包管理器找到LTS(长期稳定)版本安装即可。例如Manjaro用户只需在终端输入：

# Manjaro/Arch
yay -S nodejs-lts
# Ubuntu/Debian
sudo apt install nodejs

就可以安装了。

Git安装

Git官网：点这进入

与Node.js一样，在包管理器下载即可，部分发行版可能装机自带git。

# Manjaro/Arch
yay -S git
# Ubuntu/Debian
sudo apt install git

HEXO安装

首先，检查一下版本来确定是否安装成功了。

# 分开运行
npm -v
node -v

显示版本信息即可：

然后在合适的地方创建一个放置hexo仓库的文件夹，然后进入这个文件夹，安装hexo。

# 创建文件夹(不一定要用命令)
mkdir ~/Document/hexo
# 进入文件夹
cd ~/Document/hxo
# 安装hexo
npm install hexo-cli -g
# 中间可能会出现不少warn之类的提示，只要不影响安装都不用管
npm install hexo --save
# 最后进行版本检测来确认是不是安装好了
hexo -v

显示版本信息就可以了：

HEXO初始化

首先对hexo进行初始化和仓库建立：

# 初始化hexo仓库
hexo init
# 安装hexo相关组件
npm install

然后就可以实际体验了：

# 网页编译
hexo g
# 本地运行
hexo s

然后你可以看到一条INFO提醒你hexo在http://localhost:4000运行，打开浏览器输入这个本地地址即可预览网页。(以后在编译网页以后想要提前预览再上传可直接用hexo s来本地预览。)

将本地网页仓库上传到github

git配置

• 首先设置一下git信息

# git的用户名
git config --global user.name "你的名字"
# git的邮箱
git config --global user.email "example@gmail.com"

• 然后检查SSH信息

# 列出该目录下的文件，查看是否存在你的id,你的id.pub
ls ~/.ssh

没有SSH KEY就生成密钥：

# 写自己的邮箱
ssh-keygen -t rsa -C "example@gmail.com"
# 如果不需要密码，就一直回车确定就好了

SSH的默认存储位置在：~/.ssh

• 把密钥添加到ssh_agent来进行保管：

# 让ssh_agent在后台运行
eval "$(ssh-agent -s)"
#添加生成的SSH KEY
ssh-add ~/.ssh/id_rsa

• 将ssh密钥添加到Github里：

打开你的Github主页，点击头像，点击设置，把id_rsa.pub文件里的内容复制到这里

• 测试

ssh -T git@github.com

假如看到:"Hi 你的用户名! You've successfully authenticated, but GitHub does not provide shell access."这句话，就说明成功了。

• 提前安装一个扩展插件来帮助连接仓库

npm install hexo-deployer-git --save

将本地仓库与Github连接

打开hexo的路径，打开_config.yml文件，找到Deploy，然后参照如下进行修改：

# 进入hexo目录，打开文件
cd ~/Documents/hexo
# 可以用别的文本编辑器，nano，vi都可以
vim _config.yml
# 找到deploy语句，进行修改(vim编辑器可以输入 /deploy 快速搜索)

修改文件：

deploy:
    type: git
    repo: git@github.com:你的用户名/你的用户名.github.io.git
    branch: master

你的第一篇文章

新建博客文章

通过hexo的命令直接生成文章：

# 进入主目录
cd ~/Documents/hexo
# 生成文章
hexo new post "My First Artical"

生成的文章都放在你的hexo主目录/hexo/source/_posts目录下，这时你可以在目录下看到My First Artical.md文件。你也可以直接在用其他Markdown编辑器如Typora,VS Code,Atom里打开这个目录直接创建.md文件来写文章。

文章格式

如果是自己直接创建新文章的话，需要注意hexo会读取文章的标题头

一般来说，你需要在文章的开头使用短横线分栏对文章内容进行描述，如下图：

使用三个短横线-进行区分。每个内容的作用细则点这查看。

写完文章之后，打开终端，输入命令进行文章编译渲染：

# 生成文章页面
hexo g
# 部署网页
hexo d
# 不需要预览的话可以直接一条命令全部解决
hexo d -g

图床推荐

写文章，一直用自己的服务器，加载慢而且很快也会没存储空间，使用图床是最方便而且避免很多麻烦的方式，我常用的图床是sm.ms，速度一般，但是贵在免费，而且操作简单，将HTML链接拷到文章就可以用了。

网页主题

找到一个心仪的主题

假如不会自己设计网页，也可以去找别人设计好的网页，然后下载源代码。直接谷歌搜索hexo主题查看别人的网页，然后找到他的Github主页fork一份使用，这里也有别人搜集好的好看的主题，下载好之后把整个文件夹拷到hexo主目录下的themes文件夹下。

应用下载好的主题

在hexo根目录下，修改_config.yml文件，将其中的theme字段修改为你的主题文件夹名。

# Extensions
## Plugins:***
## Themes:***
theme: 你的文件夹名字

在终端输入

hexo s

在本地进行预览。

假如出现报错但是你不知道是什么原因的话，在终端输入

hexo s --debug

输出运行日志，在输出的信息中检查异常，并定位问题所在。

使用Butterfly主题

感谢jerryc127大佬，他的github主页引导

假如你对我的主题感兴趣，也可以在终端输入以下命令：

# 在hexo根目录路径下使用
cd ~/Documents/hexo
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

然后你需要将_config.yml文件中的theme字段改成Butterfly。同时为了网页平滑升级，需要在 source/ _data下创建Butterfly.yml文件来替换原来theme文件夹下的_config.yml文件。在终端输入：

# 在hexo/source目录下创建_data文件夹
mkdir ~/Documents/hexo/source/_data
# 将主题文件夹的_config.yml文件直接复制过去，并且重命名
cp ~/Documents/hexo/themes/Butterfly/_config.yml ~/Documents/hexo/source/_data/Butterfly.yml

之后所有的网站自定义都在这个Butterfly.yml文件里修改，在终端输入

hexo d -g

就可以把更改提交到github的仓库。

对于站点的细节配置可以查看这个链接，来对博客进行自定义。

安装看板娘插件

来源: 韦阳的博客 作者: 韦阳 链接: https://godweiyang.com/2018/04/13/hexo-blog/#toc-heading-21

有一个萌萌的看板娘一定让博客增色不少，安装看板娘插件也非常简单：

首先安装live2d插件：

npm install --save hexo-helper-live2d

然后安装看板娘，我这里安装了初音，也可以谷歌一下其他的看板娘角色：

# 安装其他角色只需要修改后面的角色名就好了
npm install live2d-widget-model-miku

最后就是在根目录下的_config.yml文件下添加以下代码(直接复制就好了)：

# 删除#的内容
live2d: 
  enable: true 
  scriptFrom: local 
  pluginRootPath: live2dw/ 
  pluginJsPath: lib/ 
  pluginModelPath: assets/ 
  tagMode: false 
  log: false 
  model: 
    use: live2d-widget-model-miku     #显示什么角色
  display:                 #显示位置和大小
    position: right 
    width: 150 
    height: 300 
  mobile: 
    show: true 
  react: 
    opacity: 0.8           #透明度,1为不透明

然后再重新部署一下就能出现了。

最后

欢迎访问我的主页：