搭建个人博客 步骤详述（hexo +github）

安装node.js 和 git

• 安装Node.js最简单的方式就是下载安装程序来安装。
• 使用Homebrew，MacPorts或下载安装程序安装，如果你的电脑上装了Xcode的话，则无需安装，Xcode自带Git。
• 检查是否安装成功

$ node -v
v12.16.1

$ npm -v
6.13.4

$ Git --version
git version 2.24.1 (Apple Git-126)

安装hexo

安装时需要注意权限问题，加上sudo，其中-g表示全局安装

sudo npm install -g hexo

博客初始化

• 创建好存储博客的文件夹，比如命名为GithubBlog，然后命令进入文件夹

cd GithubBlog

• 执行命令初始化本地博客，下载一系列文件

hexo init

• 执行以下命令安装npm

sudo npm install

• 执行以下命令生成本地网页文件，并开启服务器，然后可以通过http://localhost:4000/查看本地博客

当localhost:4000 打不开时，尝试使用http://127.0.0.1:4000/

hexo g
hexo s

本地博客关联 github

• 首先在github新建仓库，命名为 user.github.io，例如 chenjialin1016.github.io

• cd 到 GithubBlog文件夹下，打开_config.yml文件，可以使用终端，也可以使用sublime

vim _config.yml

打开后滑动到文档末尾，配置deploy

deploy:
  type: git
  repository: https://github.com/chenjialin1016/chenjialin1016.github.io.git
  branch: master

注意：
1、其中将repository中的chenjialin1016改为自己的username
2、type、repository、branch后均有空格

• 通过以下命令在GithubBlog文件夹下生成静态文件，并上传指服务器

hexo g
hexo d

注意：
1、若执行 hexo g出错，执行npm install hexo --save
2、若执行hexo d出错，执行npm install hexo-deployer-git --save
3、错误修正后，需要再次执行以上两个命令
4、若未关联Github，执行hexo d时会提示输入github的用户名和密码

username for 'https://github.com':此处输入用户名
password for 'https://github.com':此处输入密码

• hexo d执行成功后，可通过https://chenjialin1016.github.io/访问博客，看到的内容与http://localhost:4000/一致

添加ssh keys 到 Github

添加ssh keys后，更新博客不需要再输入用户名密码

• 首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中，否则新生成ssh key。
• 执行以下命令生成ssh key，将其中的[email protected]改成自己注册的gihub的邮箱地址，默认会在~/.ssh/id_rsa.pub中生成id_rsa和id_rsa.pub文件

ssh-keygen -t rsa -C "[email protected]"        

• 利用终端打开文件夹，并打开id_rsa.pub文件，将里面的信息拷贝

open ~/.ssh

• 来到github官网，打开路径为github->Setting->SSH and GPG keys，选中SSH and GPG keys，点击New SSH keys，粘贴之前拷贝的id_rsa.pub里面的信息

扫描二维码关注公众号，回复： 11476012 查看本文章

• 到此，本地博客已经关联至github，本地博客改变之后，通过hexo g和hexo d便可更新到GitHub之中

更换 hexo主题

• cd到GithubBlog文件夹，执行以下命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

• 将GithubBlog目录下的_config.yml中的theme改为next
• 重新执行以下命令

hexo g  //生成缓存和静态文件
hexo d  //重新部署到服务器

• 当部署完成后，网页无变化时，执行以下命令

hexo clean  //清楚缓存文件(db.json)和已生成的静态文件(public)

配置 Hexo-theme-next主题

路径：GithubBlog->themes->next

• 打开_config.yml文件

# Site
title: Rudy's Blog             # 站点标题
subtitle:                      # 站点副标题
description: 记录走过的痕迹       # 站点描述
author: Rudy                   # 你的名字
language: zh-Hans              # 站点语言 (之前版本为zh-CN)
timezone:                      # 站点时区
avatar:                        # 头像 (之前版本可以在此设置头像，现在需要去主题配置文件设置)

• 配置next主题，个人选择Pisces

# Schemes
# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

#schemes用来设置你使用NexT的样式主题，以前只有3项，现在增加了Gemini项。Pisces样式文章布局比以前有所加宽。

• 如果要使代码高亮，需要将auto_detect改为true，还可以选择高亮主题，修改主题目录下的_config.yml会提到

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

• 配置网页中的菜单

menu:
  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       #公益404
  
#menu用来设置菜单，我这个地方设置了5个菜单选项，分别是首页、标签、关于、分类和归档，不让显示
的菜单选项可以用#注释掉，|| 后面是设置图标，图标来自于https://fontawesome.com/icons?d=gallery

且需要执行以下命令创建menu下的子网页，以tags为例
路径：GithubBlog->sources->tags，修改文件夹中index.md中的type为tags，再次执行hexo g和hexo d将界面重新上传至服务器。
catagories 、archive、about对应的子界面同理创建

hexo new page 'tags'

• 配置highlight_theme，用来设置代码高亮的主题(默认是normal)

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

• 这里用来设置是否显示[阅读全文]，将enable改为true(默认是false)，设置length的值来决定显示字符的长度，不过Hexo推荐使用 来设置(的确后者更好用，你想显示多少就显示多少)，如果使用推荐的方式的话，那么enable得设置为false，以免冲突

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150
  
#这里用来设置是否显示[阅读全文]，将enable改为true(默认是false)，设置length的值来决定显示字符的长度，不过Hexo推荐使用<!-- more -->来设置(的确后者更好用，你想显示多少就显示多少)，如果使用推荐的方式的话，那么enable得设置为false，以免冲突

next主题官网配置教程
Fullter-shortcutKey

• 新建页面

$ hexo new page tags

• 新建文章

$ hexo new "FirstArticle"

编辑完成后，依次执行以下命令

hexo clean // 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g // 生成静态文件
hexo d // 部署网点

如果你想在本地服务器上看一下效果，可以执行：hexo s // 启动本地服务器,打开网址http://localhost:4000，你就可以看到你写的文章了

Hexo命令不能执行，返回Usage: hexo
Hexo命令不能执行，返回Usage: hexo
原因：没有进入blog文件路径下

• next设置动画背景
  搜索 canvas_nest 或 three_waves，根据您的需求设置值为 true 或者 false 即可

# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画

# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画

three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

• 配置侧边栏社交链接

social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name

图标

social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

• 每篇文章末尾配置微信公众号二维码
  在微信公众号平台下载您的二维码，并将它存放于next主题source/uploads/目录下。

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

• 配置打赏功能

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

来必力 安装代码

来必力官网

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC81MDQ3MC8yNjk1Nw==">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

google 验证

• 设置sitemap

sitemap:
    path: sitemap.xml

• 在谷歌站点地图中创建资源类型
  
  D](media/15919323394888/4592859C-473E-4E96-A9D4-7D102CAB44DD.png)
• 选择验证方式—html标签

<meta name="google-site-verification" content="GthFrJ1ky-fYHVFt1Z7Siye3kLyqYKFgt3thV4UElM4" />

• next的主题配置中配置google验证的html 码，需要执行hexo g、hexo d重新提交

google_site_verification: GthFrJ1ky-fYHVFt1Z7Siye3kLyqYKFgt3thV4UElM4

• 配置站点地图
  

百度 验证

<meta name="baidu-site-verification" content="OM2eQqaHyF" />

百度配置robots

• 添加蜘蛛协议 robots
  新建robots.txt文件，添加以下文件内容，把robots.txt放在hexo站点的source文件下。

# hexo robots.txt
User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://chenjialin1016.github.io/sitemap.xml
Sitemap: https://chenjialin1016.github.io/baidusitemap.xml

• 执行命令hexo g、hexo d重新部署
• 检测并更新

github配置自定义域名

• 先进入桌面, cd 你的hexo本地目录, cd source, touch CNAME创建CNAME文件, open CNAME打开并编辑.
• 填入域名, 不用加任何http://或者www, 填写完成后保存退出.
• 输入…/回到你的hexo本地目录. hexo g -d重新生成部署.
• 然后访问域名, 比如我的, swift520.com, 成功!~

添加文章字数统计、阅读时长（next主题已经集成）

Hexo 提供了 hexo-wordcount 插件，新版本的 next 中集成了这一点，只需要安装插件然后开启功能就 ok。
第一步：安装 word_count 插件，在博客根目录下打开终端：npm install hexo-wordcount --save
第二步：在主题配置文件 Blog\themes\next\config.yml 中打开 post_wordcount 统计功能

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true # 单篇 字数统计
  min2read: true # 单篇 阅读时长
  totalcount: false # 网站 字数统计
  separated_meta: true

菜单图标？显示问题

已查到问题，是因为使用

cnpm install

而不是使用

npm install

方案：执行npm install

不蒜子统计

• hexo-next配置文件中修改 busuanzi_count，将enbale改为 true

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: <i class="fa fa-user"></i> 访问数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-eye"></i> 浏览
  page_pv_footer: 次

• 同样，在配置文件中将footer增加counter参数

footer:
  counter: true

• 在 next主题的layout->_partials->footer.swig中增加以下代码

{% if theme.footer.counter %}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人</span>
{% endif %}

Bug：不蒜子统计失效

原因：不蒜子网址发生了变化
修正：将theme->next->_third-party->analytics中的busuanzi-counter.swig中的.js改为图中的地址
不蒜子官网

将
src=“https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js”

修改为
src=“https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js”

最后，附上个人博客地址链接

参考文章

Hexo博客Next主题添加统计文章阅读量功能
Mac上基于Github搭建Hexo博客
Mac+Hexo+GitHub博客搭建教程
hexo+next使用Valine评论系统
为 Hexo 博客主题 NexT 添加 LiveRe 评论支持
Hexo Next主题添加百度统计