blog-engine-02-通过博客引擎 jekyll 构建 github pages 博客实战笔记[2]
blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍[3]
blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 环境安装，官方文档[4]
blog-engine-02-博客引擎jekyll-jekyll SEO[5]
blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记[6]
blog-engine-05-博客引擎 Hexo 入门介绍+安装笔记[7]
blog-engine-06-pelican 静态网站生成 官方文档[8]
blog-engine-06-pelican 静态网站生成 windows 安装实战[9]
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架，具备性能、可扩展性和安全性[10]
blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器[11]
blog-engine-09-nuxt 构建快速、SEO友好和可扩展的Web应用程序变得轻松[12]
blog-engine-10-middleman 静态站点生成器，利用了现代 Web 开发中的所有快捷方式和工具[13]
前言由于个人一直喜欢使用 markdown 来写 个人博客[14]，最近就整理了一下有哪些博客引擎。
感兴趣的小伙伴也可以选择自己合适的。
HexoHexo[15] is a fast, simple & powerful blog framework.
一直使用的是 jekyll[16]，文章越写越多，不太好管理。是时候换个博客尝试一下。
Prepareblog zh_CN[17]
本机为 MAC。不同系统会略有不同，但是大同小异。
•Node.js[18]
必须。
作用：用来生成静态页面的。
houbinbindeMacBook-Pro:~ houbinbin$ node -vv6.2.2
•Git[19]
必须。
作用：代码仓库管理。
houbinbindeMacBook-Pro:~ houbinbin$ git --versiongit version 2.8.1
•Github[20]
申请个账号。我相信你应该知道。
Install•下载安装 hexo
找一个你想放置blog的文件夹，执行：
sudo npm install -g hexo-cli
实际操作：
houbinbindeMacBook-Pro:fork houbinbin$ pwd/Users/houbinbin/it/forkhoubinbindeMacBook-Pro:fork houbinbin$ npm install -g hexo-clifetchMetadata → network 。。。。
•测试
等待下载完成。输入命令 hexo
houbinbindeMacBook-Pro:fork houbinbin$ hexoUsage: hexo <command>Commands: help Get help on a command. init Create a new Hexo folder. version Display version information.Global Options: --config Specify config file instead of using _config.yml --cwd Specify the CWD --debug Display all verbose messages in the terminal --draft Display draft posts --safe Disable all plugins and scripts --silent Hide output on consoleFor more help, you can use 'hexo help [command]' for the detailed informationor you can check the docs: http://hexo.io/docs/
•初始化博客
// 建立一个博客文件夹，并初始化博客，<folder>为文件夹的名称，可以随便起名字$ hexo init <folder>// 进入博客文件夹，<folder>为文件夹的名称$ cd <folder>// node.js的命令，根据博客既定的dependencies配置安装所有的依赖包$ npm install
此处为了方便, 直接使用 XXX.github.io 命名。 实际操作
houbinbindeMacBook-Pro:fork houbinbin$ hexo init ryo.github.ioINFO Cloning hexo-starter to ~/IT/fork/ryo.github.ioCloning into '/Users/houbinbin/IT/fork/ryo.github.io'...remote: Counting objects: 53, done.remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53Unpacking objects: 100% (53/53), done.Checking connectivity... done.Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'Cloning into 'themes/landscape'...remote: Counting objects: 764, done.remote: Total 764 (delta 0), reused 0 (delta 0), pack-reused 764Receiving objects: 100% (764/764), 2.53 MiB | 130.00 KiB/s, done.Resolving deltas: 100% (390/390), done.Checking connectivity... done.Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e22468d38'INFO Install dependenciesnpm WARN deprecated swig@1.4.2: This package is no longer maintainednpm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issuenpm WARN prefer global marked@0.3.6 should be installed with -g> fsevents@1.1.1 install /Users/houbinbin/IT/fork/ryo.github.io/node_modules/fsevents> node install[fsevents] Success: "/Users/houbinbin/IT/fork/ryo.github.io/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installedPass --update-binary to reinstall or --build-from-source to recompile> dtrace-provider@0.8.1 install /Users/houbinbin/IT/fork/ryo.github.io/node_modules/dtrace-provider> node scripts/install.js
新开一个窗口
houbinbindeMacBook-Pro:blog houbinbin$ pwd/Users/houbinbin/it/fork/ryo.github.iohoubinbindeMacBook-Pro:blog houbinbin$ npm installhoubinbindeMacBook-Pro:blog houbinbin$ ls_config.yml node_modules package.json scaffolds source themesconfig blog
类似 jekyll，需要修改 _config.yml文件。
修改网站相关信息
title: echo blogsubtitle: the blog of ryodescription: One Echo, Endless Missauthor: ryolanguage: zh-CNtimezone: Asia/Shanghai
配置统一资源定位符（个人域名）
url: https://ryo.github.io
对于root（根目录）、permalink（永久链接）、permalink_defaults（默认永久链接）等其他信息保持默认。
配置部署
deploy: type: git repo: https://github.com/houbb/ryo.github.io.git branch: masterHello World
•新建一篇文章
// 新建一篇文章hexo new "文章标题"
实际：
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo new "helloworld"INFO Created: ~/IT/fork/ryo.github.io/source/_posts/helloworld.md
•启动服务
hexo server
实际
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo serverINFO Start processingINFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.博客发布
$ hexo generate$ hexo deploy
前面的 deploy 已经指定了其对应的 github 仓库。你可以在github上创建一个 XXX.github.io 项目，或者使用其他方式。
其中 XXX 是你的github用户名。我以前使用 jekyll 已经占用一个了。此处先演示本地。
实际操作：
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo generateINFO Start processingINFO Files loaded in 177 msINFO Generated: index.htmlINFO Generated: archives/index.htmlINFO Generated: fancybox/blank.gifINFO Generated: fancybox/jquery.fancybox.cssINFO Generated: fancybox/jquery.fancybox.pack.jsINFO Generated: fancybox/fancybox_loading.gifINFO Generated: fancybox/jquery.fancybox.jsINFO Generated: fancybox/fancybox_overlay.pngINFO Generated: fancybox/fancybox_loading@2x.gifINFO Generated: fancybox/fancybox_sprite.pngINFO Generated: fancybox/fancybox_sprite@2x.pngINFO Generated: archives/2017/03/index.htmlINFO Generated: archives/2017/index.htmlINFO Generated: css/fonts/FontAwesome.otfINFO Generated: js/script.jsINFO Generated: fancybox/helpers/jquery.fancybox-buttons.jsINFO Generated: fancybox/helpers/jquery.fancybox-buttons.cssINFO Generated: fancybox/helpers/jquery.fancybox-thumbs.cssINFO Generated: fancybox/helpers/jquery.fancybox-thumbs.jsINFO Generated: css/style.cssINFO Generated: css/fonts/fontawesome-webfont.woffINFO Generated: fancybox/helpers/jquery.fancybox-media.jsINFO Generated: css/fonts/fontawesome-webfont.eotINFO Generated: fancybox/helpers/fancybox_buttons.pngINFO Generated: css/images/banner.jpgINFO Generated: css/fonts/fontawesome-webfont.svgINFO Generated: css/fonts/fontawesome-webfont.ttfINFO Generated: 2017/03/29/hello-world/index.htmlINFO 28 files generated in 656 ms
Deployer not found
解决方式 npm install hexo-deployer-git --save
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo deployERROR Deployer not found: githubhoubinbindeMacBook-Pro:ryo.github.io houbinbin$ npm install hexo-deployer-git --savehexo-site@0.0.0 /Users/houbinbin/IT/fork/ryo.github.io`-- hexo-deployer-git@0.2.0
重新运行
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo deployINFO Deploying: gitINFO Setting up Git deployment...Initialized empty Git repository in /Users/houbinbin/IT/fork/ryo.github.io/.deploy_git/.git/[master (root-commit) 29675e7] First commit 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 placeholderINFO Clearing .deploy_git folder...INFO Copying files from public folder...[master 02b7255] Site updated: 2017-03-29 23:17:16 29 files changed, 5793 insertions(+) create mode 100644 2017/03/29/hello-world/index.html create mode 100644 archives/2017/03/index.html create mode 100644 archives/2017/index.html create mode 100644 archives/index.html create mode 100644 css/fonts/FontAwesome.otf create mode 100644 css/fonts/fontawesome-webfont.eot create mode 100644 css/fonts/fontawesome-webfont.svg create mode 100644 css/fonts/fontawesome-webfont.ttf create mode 100644 css/fonts/fontawesome-webfont.woff create mode 100644 css/images/banner.jpg create mode 100644 css/style.css create mode 100644 fancybox/blank.gif create mode 100644 fancybox/fancybox_loading.gif create mode 100644 fancybox/fancybox_loading@2x.gif create mode 100644 fancybox/fancybox_overlay.png create mode 100644 fancybox/fancybox_sprite.png create mode 100644 fancybox/fancybox_sprite@2x.png create mode 100644 fancybox/helpers/fancybox_buttons.png create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js create mode 100644 fancybox/helpers/jquery.fancybox-media.js create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js create mode 100644 fancybox/jquery.fancybox.css create mode 100644 fancybox/jquery.fancybox.js create mode 100644 fancybox/jquery.fancybox.pack.js create mode 100644 index.html create mode 100644 js/script.js delete mode 100644 placeholderTo https://github.com/houbb/ryo.github.io.git + 921a4a1...02b7255 HEAD -> master (forced update)Branch master set up to track remote branch master from https://github.com/houbb/ryo.github.io.git.INFO Deploy done: gitWindows 安装记录准备工作
•安装 Node（必须）
官方 https://nodejs.org/en/ 下载安装即可。
node -vv12.16.2
•git 安装
git --versiongit version 2.24.0.rc1.windows.1
•github 申请
正式使用•安装 hexo
npm install -g hexo-cli
•初始化文件夹
$ hexo init itbook52.github.io$ cd itbook52.github.io
这个目标文件夹必须为空
生成的文件信息
$ ls_config.yml db.json node_modules/ package.json package-lock.json scaffolds/ source/ themes/修改配置
为了更方便的使用，我们修改一下 _config.yml 配置文件。
•原始内容
# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: Hexosubtitle: ''description: ''keywords:author: John Doelanguage: entimezone: ''# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://yoursite.comroot: /permalink: :year/:month/:day/:title/permalink_defaults:pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: enable: true # Open external links in new tab field: site # Apply to the whole site exclude: ''filename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight: enable: true line_number: true auto_detect: false tab_replace: '' wrap: true hljs: false# 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 & Tagdefault_category: uncategorizedcategory_map:tag_map:# Metadata elements## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/metameta_generator: true# 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-DDtime_format: HH:mm:ss## Use post's date for updated date unless set in front-matteruse_date_for_updated: false# Pagination## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# Include / Exclude file(s)## include:/exclude: options only apply to the 'source/' folderinclude:exclude:ignore:# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: landscape# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: ''
•修改后
主要修改以下三个部分的内容：
title: IT Bookssubtitle: the it booksdescription: 收集常见的 it 书籍，供学习之用author: ryolanguage: zh-CNtimezone: Asia/Shanghaiurl: https://itbook52.github.iodeploy: type: git repo: https://github.com/itbook52/itbook52.github.io.git branch: master运行
•新建博客
hexo new "helloworld"
•启动
hexo server
通过 http://localhost:4000 可以访问。
生成与发布•生成静态文件
$ hexo generate
•将本地文件与远程进行管理
git initgit add git commit -m "first commit"git remote add origin https://github.com/itbook52/itbook52.github.io.gitgit push -u origin master
•部署
$ hexo deploy
报错：
ERROR Deployer not found: git
执行
npm install --save hexo-deployer-git
重新执行即可。
主题主题列表主题[21]
推荐主题hexo-theme-next[22]
hexo-theme-yilia[23]
使用 next 主题$ pwdD:\_github\itbook52.github.io
在 blog 的 themes 目录下，下载 next 主题。
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
将主题直接下载到对应的 themes\next 目录下。
配置 _config.yml配置主题为 next
theme: next启动
•清空历史数据
hexo clean
•启动服务
hexo server
再次访问即可 http://localhost:4000/
添加本地搜索安装安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
npm install hexo-generator-searchdb --save编辑配置
编辑站点配置文件，新增以下内容到任意位置：
search: path: search.xml field: post format: html limit: 10000编辑主题配置文件
启用本地搜索功能：
# Local searchlocal_search: enable: true报错
INFO Start processingFATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.htmlTemplate render error: (unknown path) Error: expected end of comment, got end of file原因
hexo 中 {# 属于吧保留字，会报错。解决方案
将 { 与 # 拆开写。
References[1] blog-engine-01-常见博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比: https://houbb.github.io/2016/04/13/blog-engine-01-overview[2] blog-engine-02-通过博客引擎 jekyll 构建 github pages 博客实战笔记: https://houbb.github.io/2016/04/13/blog-engine-02-jekyll-01-install[3] blog-engine-02-博客引擎jekyll-jekyll 博客引擎介绍: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-02-intro[4] blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 环境安装，官方文档: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-03-install-on-windows-doc[5] blog-engine-02-博客引擎jekyll-jekyll SEO: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-04-seo[6] blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记: https://houbb.github.io/2016/04/13/blog-engine-04-hugo-intro[7] blog-engine-05-博客引擎 Hexo 入门介绍+安装笔记: https://houbb.github.io/2017/03/29/blog-engine-05-hexo[8] blog-engine-06-pelican 静态网站生成 官方文档: https://houbb.github.io/2016/04/13/blog-engine-06-pelican-01-intro[9] blog-engine-06-pelican 静态网站生成 windows 安装实战: https://houbb.github.io/2016/04/13/blog-engine-06-pelican-02-quick-start[10] blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架，具备性能、可扩展性和安全性: https://houbb.github.io/2016/04/13/blog-engine-07-gatsby-01-intro[11] blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器: https://houbb.github.io/2016/04/13/blog-engine-08-vuepress-01-intro[12] blog-engine-09-nuxt 构建快速、SEO友好和可扩展的Web应用程序变得轻松: https://houbb.github.io/2016/04/13/blog-engine-09-nuxt-01-intro[13] blog-engine-10-middleman 静态站点生成器，利用了现代 Web 开发中的所有快捷方式和工具: https://houbb.github.io/2016/04/13/blog-engine-10-middleman-01-intro[14] 个人博客: https://houbb.github.io/[15] Hexo: https://hexo.io/[16] jekyll: https://houbb.github.io/2016/04/13/jekyll[17] blog zh_CN: http://www.jianshu.com/p/465830080ea9[18] Node.js: https://nodejs.org/[19] Git: https://git-scm.com/[20] Github: https://github.com/[21] 主题: https://github.com/hexojs/hexo/wiki/Themes[22] hexo-theme-next: https://notes.iissnan.com/[23] hexo-theme-yilia: http://litten.me/
