Hexo博客搭建

发表于 | 分类于
本文字数： 3.2k | 阅读时长 ≈ 6 分钟

之前在学习编程和开始工作的时候，也都有整理和写笔记的习惯，笔记一直是使用Gitbook编辑整理和同步的，也有想搭建一个自己的博客但是又因为自己太懒散，而且感觉搭建博客比较复杂，所以就一直没有付诸行动；直到最近偶然看到介绍使用Hexo + GitHubPages搭建博客的文章，就查了下相关的资料和介绍，搭建了一个简单的博客（GitHubPages + Hexo + Next主题）。

关于博客

  • 常见的博客搭建方法（查到资料的）
  • WordPress：一般需要独立域名（收费），传统的博客搭建方法，但是对MarkDown支持不是很好
  • GitHubPages + Jekell：免费，稍微比较麻烦
  • GitHubPages + Hexo：免费，使用简单，适合新手入门

关于Hexo

  • Hexo 是一个基于 Nodejs 的静态博客网站生成器，作者是来自中国台湾的Tommy Chen。
  • 作者网站

特点

  • 部署方便且速度快
  • 支持Markdown语法
  • 已移植 Octopress 插件
  • 高扩展性、自订性
  • 兼容Windows, Mac & Linux

Hexo实现原理

  • 1、Hexo是一个静态博客生成器，根据给定的主题，负责把写好的 Markdown 文章转换成一堆 HTML + CSS + Javascript 页面。
  • 2、Hexo还有把生成好的站点上传到 Github Pages 的功能。

GitHubPages + Hexo搭建方法

1
2
3
4
5
hexo clean // 清空本地缓存，解决由于本地缓存导致部署无效
hexo g // == hexo generate #生成静态网页
gulp // 压缩生成的静态资料（如果安装gulp插件，具体安装方法见下面）
hexo d // == hexo deploy #开始部署
hexo s // == hexo server #启动服务器 本地调试使用

插件安装

RSS订阅插件

  • 执行如下指令
1
npm install hexo-generator-feed --save
  • 打开 Hexo 站点下的 _config.yml ,添加如下配置：
1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:

本地搜索插件

  • 执行如下指令
1
npm install hexo-generator-searchdb --save
  • 打开 Hexo 站点的 _config.yml,添加配置
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

静态资源压缩插件

  • 安装gulp
1
npm install gulp -g // 如果报npm WARN deprecated警告 可使用npm install -g npm
  • 安装gulp插件：
1
2
3
4
5
npm install gulp-minify-css --save // 如果报npm WARN deprecated警告则使用sudo npm install gulp-clean-css执行
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save

主题配置

设置网站标签页favicon图标

  • 图标格式：32 * 32 的ico格式图标，重命名为favicon.ico
  • 把设计好的图标放在/themes/next/source/images里
  • 修改主题配置文件medium
1
2
3
4
5
6
7
favicon:
    small: /images/favicon-16x16-next.png
    medium: /images/favicon.ico
    apple_touch_icon: /images/apple-touch-icon-next.png
    safari_pinned_tab: /images/logo.svg
    #android_manifest: /images/manifest.json
    #ms_browserconfig: /images/browserconfig.xml

关于多电脑同步

  • 使用电脑搭建好博客后可能面临如下问题

    • 1、是在家里私人电脑上搭建的，想在公司也可以愉快的写文章
    • 2、换了一台新的电脑（挣钱了要换装备😂）

    • 3、电脑系统崩了😭

    • 关于多电脑同步解决方案1

      • gitHub分支管理，master分支存博客静态网页资源，Hexo分支存所有源文件（设置为默认分支）
      • 每个电脑每次更新文章前需要正常的git同步操作
      • 每个电脑每次更新文章后需要正常的git同步操作
      • 但是个人感觉不安全，别人可能直接把你的Hexo分支拉取下来就等于获取了你的全部博客资源（虽然我的博客没什么有用的价值😂）
      • 具体分支实现可参考利用分支同步

    • 关于多电脑同步解决方案2

      • 每次手动拷贝最新的文件夹替换另一台电脑旧文件夹（想想就麻烦）
      • 通过云盘如Dropbox自动同步整个文件夹，使所有的电脑都可以同步到最新的

  • 目标电脑获取到最新的博客文件后

    • 如果是情形3可以考虑先把整个博客目录拷贝出来到新的系统博客目录下
    • GitHub添加配置新电脑的SSH key 和搭建时一样参考Mac搭建Hexo博客及NexT主题配置优化

    • 配置运行环境，执行如下指令

      1
      2
      brew install node   // 安装Node.js
      npm install -g hexo // 安装hexo

    • 切换到博客目录下安装博客模块和插件 (具体参考之前安装过的插件)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      npm install
       npm install hexo-deployer-git --save
       npm install hexo-generator-feed --save
       npm install hexo-generator-sitemap --save
       npm install hexo-generator-feed --save
       npm install hexo-generator-searchdb --save
       
      npm install -g gulp 
          npm install gulp-minify-css --save
          npm install gulp-uglify --save
          npm install gulp-htmlmin --save
          npm install gulp-htmlclean --save
          npm install gulp-imagemin --save
  • 又可以愉快的随时随地写文章了😂

参考

要不要鼓励一下😘