CentOS7 基于 Hexo 建站

Markdwon 格式特别注意（巨坑）

1. 使用 ``` … ``` 标示代码块，在第二个 ``` 后不要有空格，否则会导致代码块渲染混乱
2. 要输出有特殊意义的字符，使用转义字符 \

博客框架的选择

• Hexo
• 原因： Hexo 你太美

  Hexo 是用 Node.js 开发的一个静态站点生成器（Static Site Generator），支持 Markdown 语法写作，有着强大的插件系统，而且性能优异。

---

参考文章

• Hexo 官方文档
• 手把手教你搭建自己的个人博客
• HEXO建站指南
• hexo-theme-butterfly安装文档
• 使用 GitHub Pages 免费搭建博客
• hexo超完整的搭建教程，让你拥有一个专属个人博客
• 在 Ubuntu 14.04 服务器上部署 Hexo 博客
• Hexo个人博客搭建+主题优化+文章加密访问
• 手把手教你用Docker搭建Hexo博客-Nginx https证书配置

---

部署思路

1. 在本地 windows 上部署 HEXO 项目目录
2. 在远程 CentOS7 server 上创建该项目的远程裸仓
3. 将本地的版本推送至 CentOS7 server 远程仓库
4. 配置 Nginx 托管博客文件目录:/etc/nginx/nginx.conf 中的 root 路径
5. 配置远程仓库自动更新到博客文件目录的钩子
6. 写作，生成静态文件，部署

---

环境搭建

• 安装 Node.js

  CentOS7:  
  yum -y install nodejs 
  
  Windows（通常安装在 Windows 上书写文章）：
  到 https://nodejs.org/en/ 下载二进制安装文件，执行安装操作

• 安装 HEXO

  安装指令：  
       npm install hexo-cli hexo-server -g 
       或者
       npm install hexo-cli -g
       npm install hexo --save
  
  模块解释：
       hexo-cli    是 Hexo 的命令行工具，可用于快速新建、发布、部署博客；
       hexo-server 是 Hexo 的内建服务器，可用于部署前的预览和测试。-g 选项，表示全局安装。我们这里采用 nginx 托管。

• 常用指令

• 在本地创建并初始化一个 HEXO 项目目录

  $ hexo init <folder>
  $ cd <folder>
  $ npm install
  
  如: 目录为 blog  
      $ hexo init blog
      $ cd ./blog
      $ npm install

• ./blog下的目录结构：

  .
  ├── _config.yml         
  ├── package.json     
  ├── scaffolds            
  ├── source             
   |   ├── _drafts
   |   └── _posts           
  └── themes

• 目录解释

  文件或目录	描述
  _config.yml	网站的 配置 信息，您可以在此配置大部分的参数。
  package.json	应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。
  scaffolds	模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。又如：hexo new photo “My Gallery”，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章
  source	资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，（开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。）Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
  _drafts	方式未发布的草稿的地方
  _posts	放发布的 markdown 文章的地方
  themes	主题 文件夹。Hexo 会根据主题来渲染生成静态页面。

• 下载主题

  git clone https://github.com/jerryc127/hexo-theme-butterfly.git  到 ./blog/theme 目录下

• 配置主题

---

部署服务端

1. 创建私有 Git 仓库

   在 /home/web 下，创建一个名为 hexo_static.git 的裸仓库（bare repo）:
       cd /home/web  
       git init --bare hexo_static.git

2. 创建用于 Nginx 托管文件目录

   创建 /var/www/hexo 目录，用于 Nginx 托管:
       sudo mkdir -p /var/www/hexo
       sudo chown -R $USER:$USER /var/www/hexo
       sudo chmod -R 755 /var/www/hexo

3. 配置 nginx

   sudo yum install nginx 
   sudo vim /etc/nginx/nginx.conf  
   将其中的 root 指令指向 /var/www/hexo 目录:
   ...
   
   server {
       listen 80 default_server;
       listen [::]:80 default_server ipv6only=on;
   
       root /var/www/hexo; # 需要修改的部分
       index index.html index.htm;
   ...  
   如果以后购买并备案域名之后，可以再将配置中的 default_server 修改为你的域名。

4. 重启 Nginx 服务，使得改动生效

   sudo service nginx restart

5. 创建 Git 钩子

   在服务器上的裸仓库 hexo_static 创建一个钩子，在满足特定条件时将静态 HTML 文件传送到 Web 服务器的目录下，
   即 /var/www/hexo。 在 /home/web/hexo_static.git/hooks 目录下创建一个新的钩子文件：
   vim /home/web/hexo_static.git/hooks/post-receive

    在shell脚本里执行sudo 命令:
    echo "yourpasswd" |sudo -S yourcommand 
    但是不安全，因为密码都显示在 shell 脚本里面了
   
    #!/usr/bin/bash
    echo "****" | sudo git --work-tree=/var/www/hexo --git-dir=/home/web/hexo_static.git checkout -f
   
   或者切换到 root 用户， 配置 /etc/sudoers.d/lbs-set-soduers 文件
   web    ALL=(ALL)       NOPASSWD:ALL
   
   #!/usr/bin/bash
   sudo git --work-tree=/var/www/hexo --git-dir=/home/web/hexo_static.git checkout -f

6. 配置防火墙

   查看已经开放的端口:
   sudo firewall-cmd --list-ports   
   
   开启端口 80:  
   sudo firewall-cmd --zone=public --add-port=80/tcp --permanent  
   
   命令含义:
   –zone #作用域
   –add-port=80/tcp #添加端口，格式为：端口/通讯协议
   –permanent #永久生效，没有此参数重启后失效
   
   重启防火墙：
   sudo firewall-cmd --reload

---

新建博客草稿并发布

1. 创建第一篇博文

   hexo new [layout] <title>
   Hexo 有三种默认布局：post、page 和 draft上
   post  布局生成文件路径：source/_posts
   page  布局生成文件路径：source
   draft 布局生成文件路径：source/_drafts
   
   hexo new draft first-draft
   draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以

2. 以 markdown 格式编辑 first-draft.md 文档

3. 预览草稿：

   hexo server --draft

4. 发布草稿到 post

   hexo publish draft first-draft

5. 生成静态文件

   hexo g 
   静态文件，存放到：hexo_blog\public 目录下

6. 部署到远端服务器上

   部署前配置  hexo_blog/_config.yml
   
   远程仓库：
   deploy:
     type: git  
     repo: web@lbscentos:/home/web/hexo_static_algoblu.git
     branch: master
   
   hexo d

---

设置 Categories

• 确认站点配置文件 hexo_blog/_config.yml 打开了

  category_dir: categories

• 确认主题配置文件 hexo_blog/theme/Butterfly/_config.yml 打开了

  # Main menu navigation
  # format: xxx: /xxx/||icon
  # ---------------
  menu:
  Home: /||fa fa-home
  Archives: /archives/||fa fa-archive
  Tags: /tags/||fa fa-tags
  Categories: /categories/||fa fa-folder-open  # 后面指定了图标
  Link: /link/||fa fa-link
  About: /about/||fa fa-heart

• 新建 categories 文件

  hexo new page categories
  此时会在source目录下生成 categories/index.md 文件

• 修改 categories/index.md

  ---
  title: categories
  date: 2019-08-16 16:20:05
  type: "categories"     <!-- 必须 -->
  comments: false        <!-- 必须 -->
  ---

• 为文章添加 categories

  ---
  title: CentOS7 基于 Hexo 建站  
  date: 2019-08-15 15:18:36  
  tags: 
    - Hexo
    - Blog  
  categories: 
    - Web
  ---

• 可以在 hexo_blog\source\_posts\ 下创建与 categories 对应的目录

  hexo_blog\source\_posts\ 下文章的 `md` 文件可以存放在对应的目录中分类，如：
  
  创建：hexo_blog\source\_posts\Web，并把 'Centos7基于Hexo建站.md' 文件放在 Web 目录下

  ---

添加 about 页面

• hexo new page “about”

  INFO  Created: E:\...\hexo_blog\source\about\index.md

• 修改 about\index.md

  ---
  title: about
  date: 2019-08-16 16:30:59
  ---
  
  > Baethan 的个人学习分享小天地

添加友情连接

• 创建友情链接页面

  1. 前往你的 Hexo 博客的根目录, 打开 MINGW64  
  2. 输入 hexo new page link
  3. 你会找到source/link/index.md这个文件
  4. 修改这个文件：
     ---
     title: Link
     date: 2019-08-16 17:11:23
     type: "link"
     ---

• 友情链接添加

  在 Hexo 博客目录中的 source/_data(没有_data，则手动创建)，创建一个文件 link.yml

  class:
  class_name: 友情链接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://cdn.xxxxx.top/avatar.png
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx  
  
  class2:
   class_name: 链接无效
   link_list:
     1:
       name: 梦xxx
       link: https://blog.xxx.com
       avatar: https://xxxx/avatar.png
       descr: xxxx
     2:
       name: xx
       link: https://www.axxxx.cn/
       avatar: https://x
       descr: xx

• Link 页面个人信息配置

  theme/Butterfly/_config.yml 中 Flink: 后

• 设置本地搜索

  npm install  hexo-generator-search --save
  
  配置：theme/Butterfly/_config.yml:
    local_search:
    enable: true
    labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

• 点击获取该主题的更多页面主题配置

---

https 证书

待补充

---

FAQ

• WARN No layout: index.html

  原因：安装了 https://github.com/jerryc127/hexo-theme-butterfly.git 主题，更具说明在配置文件
      /home/web/blog 中配置 theme: Butterfly。
  
  解决：将主题文件夹的名字 hexo-theme-butterfly 改为 Butterfly 即可。

• 在 web 用户下，git push 本地 CentOS 上的仓库到远程 gitee 服务器出现： Permission denied (publickey).

  解决：将 /home/web/.ssh 下的 config 文件和密钥对（公钥已经添加到远程服务器）拷贝到 /root/.ssh 目录下

---

• $ npm install hexo-deployer-git –save

  问题：
  npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. 
  You must install peer dependencies yourself.
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.2.9: 
  wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  
  解决：
  npm install eslint@4.12.1 babel-eslint@10.0.2 --save-dev
  npm install ajv@^6.9.1 --save-dev

• 网页打开无法渲染

  问题：
  extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug
  include includes/pagination.pug #aside_content.aside_content include includes/aside.pug
  
  解决：
  npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus

• _config.yaml

  注意： 
  键值对的冒号后面要有空格  
  采用空格缩进