nexo+github 搭建个人博客
配置后的博客效果可以看这里：
https://musing93.github.io/
国内github实在太慢了，配置完之后可以把git仓库迁移到码云。
目录
常见问题解决
1、安装Hexo
1.1 安装Hexo
1.2 本地调试Hexo
2、Github Page托管
2.1 Hexo与github关联
2.2 更换主题
2.3 blog的测试与更新
3、多端同步
3.1 前期配置
主电脑(A)：
3.2 多端更新同步
3.2.1 remarkable安装
3.2.2 主电脑端建立博客并更新到github
3.2.3 副电脑端下载文件并更新
4、博客详细配置
4.2 更改语言与头像
4.3 设置首页不显示全文(只显示预览)
4.4 分类和标签设置
4.5 侧边栏社交、打赏、访问统计以及背景设置
环境：ubuntu16.04
网上的一些教程或多或少都存在一些问题，研究了很久终于搞定了。顺便一提，国内搜到的教程大多是坑，推荐吧
针对一些问题，先记录一下解决办法吧。
常见问题解决
- 问题1：安装nvm出现“nvm is already installed in /home/jk/.nvm, trying to update using git”
解决办法1（卸载nvm）：
# Remove nvm,you need to know the nvm path you install .
sudo rm -rf ~/.nvm
hash -r
# Remove latest node version
sudo npm uninstall -g n
# Remove n
cd ~/src/n && sudo make uninstall && cd .. && sudo rm -r n
# Remove latest nodejs version
sudo apt-get purge -y nodejs npm
# Remove nodejs-legacy version
sudo apt-get purge -y nodejs-legacy npm
sudo apt -y autoremove
# Remove nodejs files
sudo rm -rf /usr/local/lib/node_modules/npm
sudo rm -rf /usr/local/lib/node_modules/n
sudo rm -f /usr/local/bin/node
sudo rm -f /usr/local/bin/npm
sudo rm -f /usr/bin/node
sudo rm -rf /usr/local/n/versions/node下面开始正文：
部分参考博客：Linux下 Hexo + GitHub 搭建个人博客
1、安装Hexo
首先检查电脑是存在以下应用程序：
- Git
- Node.js
终端输入以下命令：
git --version
node -v安装最新版node.js：
下载 安装guide
按照guide 配置好link 后，如果npm -v 或者 node -v 不存在时，需要将响应的path加入profile
#路径跟自己node的路径对应
export PATH=$PATH:/usr/local/src/node-v12.16.1-linux-x64/bin
1.1 安装Hexo
使用npm安装Hwxo，终端输入：
npm install -g hexo-cli可能会出现“npm ERR! code E404”错误，没关系，多试几次。
还可能出现一下警告，暂时忽略：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/hexo-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
测试是否安装完成：
jk@jk-Inspiron-5577:~$ hexo --version
hexo-cli: 1.1.0
os: Linux 4.15.0-43-generic linux x64
node: 12.2.0
v8: 7.4.288.21-node.17
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.38.0
napi: 4
llhttp: 1.1.3
http_parser: 2.8.0
openssl: 1.1.1b
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1
1.2 本地调试Hexo
执行下列命令，Hexo会在指定文件夹中新建所需的文件，本博客以为musing_blog为例
cd ~/
mkdir musing_blog
hexo init musing_blog
cd musing_blog
npm install #install node_moudles安装完成后，在终端输入以下命令，最后在浏览器中输入网址http://localhost:4000， 可以看到hexo页面，见下图。
hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
^C INFO See you again
2、Github Page托管
这里假设你已经有了github账号，并且为本机地址配置了SSH公钥；如果没有，参考我的另一i篇博客：ubuntu16下github配置
系统测试连接github是否成功：
ssh -T [email protected]若不成功，那么很可能是SSH没有配置好！
接下来我们使用我们需要在github上创建一个仓库repository，注意仓库名称必须为 [github_user].github.io (github_user 是你github的用户名, 这点非常重要)。
2.1 Hexo与github关联
- 配置Deployment
上节使用hexo初始化了文件夹musing_blog，下面修改该文件夹下的_config.yml文件，找到Deployment，然后按如下修改：(冒号后要空一格！)
cd ~/musing_blog
gedit _config.yml# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: [email protected]:Musing93/Musing93.github.io.git
branch: master- 本地提交文件到 github
执行以下三个步骤：
#删除旧的public文件
hexo clean
#生成新的public文件
hexo generate
#本地使用浏览器查看博客
#hexo s
#开始部署
hexo deploy如果deploye
npm install hexo-deployer-git --save
在浏览器中输入https://github_user.github.io 就可以看到你的简单博客了。可能需要等待一段时间才能访问的，例如本文使用https://musing93.github.io访问。
2.2 更换主题
- 下载主题
所有主题都可在这里找到。
下载其中的next主题，并将主题放置～/musing93_blog/themes目录下
git clone https://github.com/iissnan/hexo-theme-next.git ~/musing_blog/themes/next- 修改主题
修改～/musing93_blog目录加下的_config.yml文件，将theme改为next
#theme: landscape
theme: next修改next目录下的_config.yml文件，选择需要使用的主题：
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
2.3 blog的测试与更新
为了避免麻烦，可以事先写一些sh文件，避免重复在终端输入很多命令：
建立博客的本地测试文件blog_localtest.sh，文件内容如下。在本地输入网址http://localhost:4000可查看博客
#!/bin/bash
hexo clean
hexo generate
hexo s将博客传到github可以运行blog_push.sh文件，浏览器中输入网址：https://musing93.github.io访问。
#!/bin/bash
hexo clean
hexo generate
hexo deploy3、多端同步
3.1 前期配置
主电脑(A)：
添加 /.deploy_git, /public 到.gitignore文件末尾,一个一行
初始化本地仓库
git init将本地仓库与远程仓库对接
git remote add origin [email protected]:Musing93/Musing93.github.io.git添加所有本地文件到git
git add .注意:如果自己的主题是克隆下来的,先把主题下的.git文件夹和.gitignore文件删除,不然上传不上去
git提交
git commit -m "提交hexo配置文件"新建分之并切换
git branch hexo
git checkout hexopush到Github项目的hexo分支上
git push origin hexo3.2 多端更新同步
3.2.1 remarkable安装
首先安装一下markdown的编辑器，这里选择的是remarkable
下载deb安装包
dpkg -i remarkable_1.87_all.deb
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install -f #补足缺失的软件包
remarkable &3.2.2 主电脑端建立博客并更新到github
新建博客，按照markdown语法格式编写。
hexo n new
remarkable new.md将本地更新推送到云端
hexo clean
hexo d -g
git add .
git commit -m "更新test"
git push origin hexo
也可以直接写成sh文件hexo_git.sh ：
#!/bin/bash
hexo clean
hexo d -g
git add .
git commit -m "备注"
git push origin hexo 或hexo_git_paramerter.sh
#!/bin/bash
hexo clean
hexo d -g
git add .
git commit -m $1
git push origin hexo 终端输入：
sh hexo_git.sh "备注"
sh hexo_git_paramerter.sh $13.2.3 副电脑端下载文件并更新
1、在该电脑配置好node.js、git、npm，并配置好git的ssh。
2、下载文件到本地：
git clone -b hexo [email protected]:musing93/musing93.github.io
3、安装npm、node.js\、git,下面命令仅供参考：
npm install4、新建博客并推送
hexo n new3
cd sh
sh hexo_git.sh 4、博客详细配置
4.1 添加tags与schedule
找到next主题下面的_config.yml文件，找到其中的menu配置代码，去掉tags和schedule、categories的注释，如下：
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat在source文件夹下建立tags与schedule、categories文件夹：
hexo n page tags
hexo n page schedule
hexo n page categories
运行之前写的本地测试文件：
sh blog_localtest.sh其他栏目，如about、sitemap等同理。
4.2 更改语言与头像
1、更换语言
在musing93_blog目录下的_config.yml文件中修改语言zh-Hans，如下：
# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language: zh-Hans
timezone:目前支持以下语言
| code | language |
|---|---|
| en | 英语 |
| zh-Hans | 大陆简体 |
| zh-Hant-HK | 港澳繁體 |
| zh-Hant-TW | 台灣正體 |
2、修改头像
在musing93_blog目录下的_config.yml文件中修改：
avatar: /images/avatar.png
4.3 设置首页不显示全文(只显示预览)
在musing93_blog目录下的_config.yml文件中修改：
auto_excerpt:
enable: true
length: 1504.4 分类和标签设置
这里主要说的是在编写文章的时候，怎么给文章设置标签和分类。
首先通过hexo n "name"命令来新建一个页面，在source/_posts目录下找到刚才新建的name.md文件，用remarked打开文件，文件内容如下：
---
title: name
date: 2019-05-29 13:45:10
tags:
---
页面默认就是长这样的，可以编辑标题、日期、标签和内容，但是没有分类的选项。我们可以手动加入categories:项,但是下次创建新的页面的时候还是没有，所以我们直接打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，重新执行hexo n 'name'命令，会发现新建的页面里有categories:项了：
---
title: name
date: 2019-05-29 13:50:25
tags:
categories:
---
在编辑文章的时候，tags:后面是设置标签的地方，如果有多个标签的话，可以用下面两种办法来设置：
第一种：
tages: [标签1,标签2,...标签n]
第二种：
tages:
- 标签1
- 标签2
...
- 标签n使用编写好的本地测试sh文件测试，发现博客虽然知道有多少个标签和分类，但是无法显示，最后使用如下方法解决：
在sourse/tags路径下的文件index.md中加入：(缺少了type说明)
---
title: tags
date: 2019-05-28 17:36:37
type: tags
---同理，/source/categories下的index.md中加入：
---
title: categories
date: 2019-05-29 13:55:58
type: categories
---此外还发现，在文章的分类下，若categories配置如下：
categories:
- test
- test.test则会生成分类test以及其子类test.test：
4.5 侧边栏社交、打赏、访问统计以及背景设置
打开/theme/next/下的_config.yml文件。
1、打赏：
修改相应代码，图片路径可以自定义：
#Reward
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /my_images/wechatpay.png
alipay: /my_images/alipay.png2、订阅公众号
wechat_subscriber:
enabled: true
qcode: /my_images/mywechat.png
description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！(目前尚未开通公众号0 0)3、访问统计
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: 访客数
site_uv_footer: 人
# custom pv span for the whole site
site_pv: true
site_pv_header: 总访问量
site_pv_footer: 次
# custom pv span for one page only
page_pv: true
page_pv_header: 阅读数
page_pv_footer:并在themes/next/layout/_partial/footer.swig开头添加如下代码
继续在该文件中添加访客统计代码：
{% if theme.footer.counter %}
本站总访问量次
本站访客数人
{% endif %}4、配置背景
首先下载背景图片：http://90sheji.com/taobao/256836.html
放到 hexo（hexo工程文件）-> themes -> next -> source -> images 的路径下；
hexo（hexo工程文件）-> themes -> next -> source -> css -> _custom ，找到路径下的custom.styl文件，在文件的最上方加上一代码
body { background:url(/images/backGround.jpg（这是你之前加的背景图片的名字）);}就完事了。
(地址可以自己指定)
5、关联评论系统
参考官方：http://theme-next.iissnan.com/third-party-services.html#yungentie