用hexo搭建静态博客

发表于 | 分类于 |

环境介绍

4.13.0-30-generic #33~16.04.1-Ubuntu SMP Mon Jan 15 21:31:06 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

NAME="Ubuntu"
VERSION="16.04.3 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.3 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial

安装 Node.js

首先需要到 Node.js 官网上下载 node.js 的二进制包,目前我下载的版本是 8.9.4 LTS稳定版,然后解压到任意目录，目前我是解压到 /usr/local/ 这个目录下

xz -d node-v8.9.4-linux-x64.tar.xz
sudo tar xvf node-v8.9.4-linux-x64.tar -C /usr/local/

然后配置环境变量，将以下加入 ~/.bashrc 中

# 在底部添加 PATH 变量
export NODE_DIR=/usr/local/node-v8.9.4-linux-x64
export PATH=$PATH:$NODE_DIR/bin

保存退出并使 .bashrc 生效

source ~/.bashrc

安装 Hexo

首先在 HOME 目录创建博客所在目录

cd ~
mkdir myBlog

然后是安装 Hexo

cd myBlog
# 安装 git
sudo apt install git -y
# 安装 hexo
sudo npm install -g hexo-cli
# 初始化 hexo
hexo init
npm i

这个时候可以启动 hexo 来测试一下 hexo 是否安装成功

hexo s

会出现

INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

字样，这个时候点击链接 http://localhost:4000/ 会出现类似下图页面

(主要是其中我修改了 _config.yml 配置文件的关系，所以标题什么的可能显得不一样，不过能出现类似的页面说明 hexo 已经配置成功)

安装 hexo 程序拓展插件

sudo npm install hexo-generator-index  hexo-generator-archive  hexo-generator-category  hexo-generator-tag hexo-server hexo-deployer-git hexo-deployer-heroku hexo-deployer-rsync hexo-deployer-openshift hexo-renderer-marked  hexo-renderer-stylus  hexo-generator-feed hexo-generator-sitemap --save

这些最好还是全部装上吧

配置 Hexo 相关主题

有关主题的配置文件有两个,一个是博客根目录下的 _config.yml 即 myBlog/_config.yml;还有一个是主题目录下的 _config.yml 即 myBlog/your_theme_dirname/_config.yml，这里我选择的是 nexT 这个主题，并且我命名的目录名为 next，所以我的主题配置文件路径为 myBlog/next/_config.yml

以下是我的博客根目录 _config.yml 的配置

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Stay Hungry
subtitle: 对，跑快一些，再快一些
description: 个人技术博客，记录工作中遇到的问题以及学习过程中的坑
author: strugglebak
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://strugglebak.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md

# Writing
new_post_name: :title-:year-:month-:day.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
plugins: hexo-generate-feed
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: next
stylus:
  compress: true

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:strugglebak/strugglebak.github.io
  branch: master
  message: '站点更新: {{ now("YYYY-MM-DD HH:mm:ss") }}'

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

Hexo 相关主题的美化

首先就是主题的安装，就是 git clone 到 theme 目录

cd ~/myBlog
git clone https://github.com/iissnan/hexo-theme-next.git theme/next

然后就是修改 theme/next 下的配置文件来美化自己的主题了，我主要做了如下几步

显示 RSS

记住要安装 Hexo 插件,如果上面我说的安装插件没有做的话，就执行下面

npm install --save hexo-generator-feed

然后在博客根目录下的 _config.yml 中添加

# Extensions
## Plugins: http://hexo.io/plugins/
## 注意冒号后的空格
plugins: hexo-generate-feed

然后在 next 主题目录下的 _config.yml 中配置 rss

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

设置侧边栏社交图标

依然在 theme/next/_config.yml 中配置

# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
social:
  GitHub: https://github.com/strugglebak || github
  E-Mail: mailto:strugglebak@gmail.com || envelope
social_icons:
  enable: true
  icons_only: false
  transition: false
  Github: github # 这个是对应的图标名
  E-Mail: fa-envelope # 这个是对应的图标名

有关图标可以到这个网站找 Font Awesome

配置评论系统

目前使用的是 来比力，这个可能需要科学上网，不能科学上网的同学请自己搭个梯子吧。然后登录注册，在代码管理的页面中获取 LiveRe UID,然后将这个 UID 粘贴到你的 theme/next/_config.yml 中的

livere_uid: #your livere_uid

配置搜索服务

在 myBlog 目录下执行

npm install hexo-generator-searchdb --save

编辑 myBlog/_config.yml，添加

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

编辑 myBlog/theme/next/_config.yml，启动本地搜索

local_search:
    enable: true

设置阅读全文

编辑 myBlog/theme/next/_config.yml

auto_excerpt:
  enable: true
  length: 150

修改文章内链接样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线
编辑 /themes/next/source/css/_custom/custom.styl，添加

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

隐藏网页底部 powered By Hexo / 强力驱动 字样

很简单，编辑 themes/next/layout/_partials/footer.swig，然后就去掉 power-by 以及 theme-info 相关的标签

{% if theme.footer.powered %}
    <div class="powered-by">
    {##}
    {{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}
    {##}
    </div>
    {% endif %}
    {% if theme.footer.powered and theme.footer.theme.enable %}
    <span class="post-meta-divider">|</span>
    {% endif %}
    {% if theme.footer.theme.enable %}
    <div class="theme-info">
    {##}{{ __('footer.theme') }} &mdash;
    {##}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">
    {##}NexT.{{ theme.scheme }}
    {##}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}
    {##}</div>
{% endif %}

右上角实现 fork me on github

我的选择是 这个黑色的 github 猫，然后编辑 themes/next/layout/_layout.swig，将代码复制到

<div class="headband"></div>

这个下面

  <a href="https://github.com/strugglebak" class="github-corner" aria-label="View source on Github">
  <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
  </svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

添加 README.md 文件

在 myBlog/source/ 目录添加 README.md，并修改 myBlog/_config.yml

skip_render: README.md

这里的目的是为了部署提交时这个 README.md 文件不会被渲染成 html

开始更新部署博客

执行以下命令

hexo clean
hexo g
hexo d

以下是我的博客链接!
我的博客链接
以下是截图!

参考链接

Github-搭建-Hexo-静态博客
Hexo博客之主题美化
hexo的next主题个性化教程:打造炫酷网站
设置语言