跳到主要内容

Hexo 博客搭建：基础篇

Hexo 是一款基于node.js 的静态博库框架，而且可以方便的托管在Github 上， 这里简单记录一下Hexo 的安装配置过程。

本篇博客算是Hexo博客搭建的第一篇文章，以后会陆续写几篇优化的文章。

从0到1，快速搭建hexo博客​

下载node.js​

官网下载LTS版本，直接安装。Hexo 是依赖于Node.js 和 git 工具，我们首先需要安装node.js ，然后利用npm去安装一些必要的插件。

安装hexo​

注意：切换为 root 账号操作，切换淘宝源 cnpm,会更加快npm的速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo cnpm install hexo-cli -g

安装完后用hexo -v 查看一下是否安装成功

启动hexo​

在目录下创建 blog 文件夹 mkdir blog ,进入 cd blog

初始化hexo

hexo init

出现 INFO Start blogging with Hexo! 表示安装完成

启动hexo

本地启动的博客会在localhost:4000中启动，用户在本地是找不到相对应的Web资源目录。markdown文件修改完后即会调用hexo中的引擎自动渲染。

hexo server/s

清空hexo

hexo

生成hexo

这一步会生成对应public文件夹，其中包含了页面对应的HTML文件，未来我们部署到服务器上看到的就是public文件夹中的内容。

hexo generate / hexo g

第一篇博客​

hexo new post 'my first blog'

该命令会在 /Users/YourUserName/blog/source/_posts/ 文件夹下生成对应的 md文件

模板文件在./scaffolds/post.md中找到。

Github Page 部署​

传统的博客搭建成本非常高，因为我们需要自己租用服务器，购买域名。现在我们可以将我们的代码托管到github仓库中，并利用Github Page 作为我们博客的页面（同样Github也提供了对应的域名）

第一步：新建仓库​

名字必须为自己的用户名+.github.io

如 PPsteven.github.io

第二步：安装git 插件​

git 插件可以帮助我们方便的把我们的修改提交到我们的仓库中，是一个很方便的插件。

cnpm install --save hexo-deployer-git

第三步：在配置文件中添加仓库信息​

在配置文件 _config.yml中找到如下代码，添加repo 信息和 branch 信息

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/PPsteven/PPsteven.github.io.git # github 仓库地址
  branch: master # 提交到的分支

第四步：部署hexo​

hexo clean    #会清除缓存文件db.json及之前生成的静态文件夹public；
hexo g     #会重新生成静态文件夹public；
hexo deploy/ hexo d    #因为之前已经安装了插件并且在博客配置文件中也配置好了，所以这个命令会在博客根目录下生成一个.deploy_git的文件夹，并 把本地生成的静态文件部署到LiLei.github.io这个仓库中的master分支上；

如果是第一次部署，会提示输入github 账号和密码

成功！！

远端访问：PPsteven.github.io

Hexo CheetSheet​

  • 初始化目录：hexo init [folder]

  • 新建文章：hexo new/n [layout] <title> 或

    • 新建草稿：hexo new draft <title>
    • 新建页面：hexo new page tags

  • 将草稿发布为正式文章：hexo publish <title>

  • 生成静态文件：hexo generate/g

    • 监听文件变化：hexo g --watch 或 hexo g -w

  • 部署：hexo deploy/d

    • 先生成后部署：hexo d -g
    • 等于 hexo g 加 hexo d

  • 启动本地服务器（服务器会监听文件变化并自动更新）

    • hexo server/s

    • 启动调试：hexo s --debug

    • 预览草稿：hexo s --draft

  • 清除缓存：hexo clean

站点配置​

主题安装教程​

安装教程： NexT主题官网 Butterfly主题

下载主题&启动​

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
# 编辑_config.yml
theme: next
# theme: Butterfly

NexT 主题配置​

设定主题/语言​

主题配置的文件在themes/NexT 文件夹下的_config.yml 中，我们按照官网教程，依次配置

#scheme: Muse
#scheme: Mist
scheme: Pisces

language: zh-Hans

添加标签/分类/关于页面​

hexo 新建命令 hexo n [layout] title 中 layout 有三个模板

post创建文章，生成在/source/_posts文件夹下，draft创建草稿，生成在 /source/ _drafts 文件夹下，page创建页面，生成在/source/YourPageName 文件夹下

![image-20191027011714501](/Users/ppsteven/Library/Application Support/typora-user-images/image-20191027011714501.png)

  • 新建页面

    hexo new page tags
    hexo new page categories
    hexo new page about

  • 修改菜单（编辑 themes/next/_config.yml）

    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

设置头像​

_config.yml 在blog 文件和 theme/next 文件夹下都有

blog 下的为站点配置文件，主题下的为主题配置文件

mkdir themes/next/source/uploads ，放置头像图片（jpg/gif 等）

修改配置文件

# avatar: http://example.com/avatar.png
avatar: /uploads/avatar_1.jpg

设置作者昵称​

修改 站点配置文件

author: Your name

设置阅读字数与时长​

需要安装插件，地址

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

配置搜索服务​

Local Search添加百度/谷歌/本地 自定义站点内容搜索

cnpm install hexo-generator-searchdb --save

编辑站点配置文件，新增如下代码

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启动本地搜索

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 3

设置摘要

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: True
  length: 150

多端同步​

正常情况下，我们写的博客是备份在本地的，没有上传服务器，但是若是有多台电脑的话。如何保持同步是一个问题。最近用闲置的笔记本搞了一个manjaro 玩耍，需要进行多端同步。

创建分支​

在blog文件夹下，我们用hexo d 命令提交的仅仅是public 文件夹里面的内容，默认的是提交在 master 分支上。为了在同一个repo 下管理我们的博客，我们可以建立新的分支hexo

  • github 上创建一个新的分支 hexo。进入仓库在，点击Branch，输入新的分支名回车建立

  • 在本地仓库创建hexo 分支，添加remote 地址

    $git checkout -b hexo # 代表创建并切换
    $git remote add origin git@github.com:PPsteven/hexo_source.git 
    # 添加远端地址
    $git remote -v # 查看remote 地址
    origin	git@github.com:PPsteven/PPsteven.github.io.git (fetch)
    origin	git@github.com:PPsteven/PPsteven.github.io.git (push)# 表示添加成功

    其实有一个取巧的方法，在GitHub上创建新的分支hexo 后，在blog 文件夹中直接将该仓库的hexo 分支克隆到本地。

    $git clone -b git@github.com:PPsteven/PPsteven.github.io.git

  • 向本地分支添加文件

    $git add . # 本地文件添加至暂存区
    $git commit -m "blog file backup" # 暂存区文件提交至本地分支
    $git push origin hexo # 向远端hexo 分支提交文件

看到网上讨论，在提交文件的时候，themes 文件夹会出错。原因是themes 下文件夹的主题包含.git 文件，造成了冲突，删除即可。

同步分支​

进入新的电脑，同步到本地就可以编辑了

$git pull origin hexo

参考教程：​

hexo教程:基本配置+更换主题+多终端工作+coding page部署分流(2)

如何使用 Hexo 和 GitHub Pages 搭建这个博客

学习了上面的教程后，基本的搭建和部署已经没有问题了。