用hexo搭建博客

2017/3/4 posted in  VPS

总结

安装好 hexo 后,用 Markdown 写好文章后,设置好部署模式.会把内容编译好,上传到 GitHub, 进行博客的渲染.
主题在 theme 文件夹下.可以随意更改.
如果要加页面,并且页面是分类页面还是标签等等,直接到文章中进行设置即可.
好好看看这个主题的设置http://theme-next.iissnan.com/theme-settings.html
好好看看hexo https://hexo.io/zh-cn/docs/

发布文章的步骤:

  • 1、hexo new 创建文章
  • 2、Markdown语法编辑文章
  • 3、hexo new page categories 新建页面
  • 4、部署(所有打开bash都是在blog目录下) hexo clean #清除缓存 网页正常情况下可以忽略此条命令
    hexo generate #生成
    hexo server #启动服务预览,非必要,可本地浏览网页
    hexo deploy #部署发布
    简写Tips: hexo n "我的博客" == hexo new "我的博客" #新建文章
    hexo p == hexo publish
    hexo g == hexo generate#生成
    hexo s == hexo server #启动服务预览
    hexo d == hexo deploy#部署

安装 hexo

mac电脑直接用下面的命令就可以很简单的安装成功

# 安装mac下的神器,brew包管理器
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 更新 brew
brew update

# 先用brew安装node
brew install node

# 然后用node安装hexo就行了
npm install -g hexo-cli

# 验证成功与否
# 输入 hexo 有提示就成了

为了后面用npm下载依赖更快速,这里建议把npm的镜像改成淘宝源,可以使用下面的几种方法来修改npm镜像源

1.临时使用

npm --registry https://registry.npm.taobao.org install express

2.持久使用

npm config set registry https://registry.npm.taobao.org
# 配置后可通过下面方式来验证是否成功
npm config get registry
# 或
npm info express

3.通过cnpm使用

npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用
cnpm install express

初始化博客

// 建立一个博客文件夹,并初始化博客,<folder>为文件夹的名称,可以随便起名字
$ hexo init <folder>
成功提示:
INFO  Start blogging with Hexo!
// 进入博客文件夹,<folder>为文件夹的名称
$ cd <folder>
// node.js的命令,根据博客既定的dependencies配置安装所有的依赖包
$ npm install
  • 执行完 hexo init test/ 命令后, test 文件下出现了这些 hushiweideMacBook-Pro:test hushiwei$ ll
    total 24
    drwxr-xr-x 9 hushiwei staff 306 3 2 10:05 ./
    drwxr-xr-x 3 hushiwei staff 102 3 2 09:53 ../
    -rw-r--r-- 1 hushiwei staff 65 3 2 10:00 .gitignore
    -rw-r--r-- 1 hushiwei staff 1483 3 2 10:00 _config.yml
    drwxr-xr-x 287 hushiwei staff 9758 3 2 10:06 node_modules/
    -rw-r--r-- 1 hushiwei staff 443 3 2 10:00 package.json
    drwxr-xr-x 5 hushiwei staff 170 3 2 10:00 scaffolds/
    drwxr-xr-x 3 hushiwei staff 102 3 2 10:00 source/
    drwxr-xr-x 3 hushiwei staff 102 3 2 10:00 themes/

因为你初始化hexo 之后source目录下自带一篇hello world文章, 所以直接执行下方命令

$ hexo generate

启动本地服务器

$ hexo server

在浏览器输入 http://localhost:4000/就可以看见网页和模板了

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

访问http://localhost:4000/,
便可以看到网站初步的模样,不要激动,我们还要把网页发布到Github上去。

我们只需要在 配置文件中把 deploy 改成这样就行了.
repo 这个 GitHub 的仓库我们需要提前在 GitHub 上建好.
仓库名为:Timehsw.github.io(Timehsw为我的 GitHub 用户名)
然后设置 ssh 免密码登录即可.不需要再 GitHub 上配置其他的什么东西了.真的非常简单.

deploy:
  type: git
  repo: https://github.com/Timehsw/Timehsw.github.io.git
  branch: master

部署到github上后,如何找到自己的博客地址?

部署到github上后,打开自己这个项目,然后找到 setting 选项卡.拉到Github Pages,这里会显示出你的博客地址.
我因为是做了域名映射,所以这里显示的是我的域名.
blogsite
注意: 为了让你的博客地址短小好看,请务必在新建这个项目的时候,取项目的名字为你的github用户名加上.github.io

就像我这样取就行了
blogname

搭建一个可以显示数学公式的hexo博客

利用MathJax来渲染LaTeX数学公式

安装方式也很简单,在博客文件夹下执行

npm install hexo-math --save
hexo math install

然后写博客的时候就可以用上了

如果不会用MathJax写公式,可以借助于这个网站,非常方便
在线数学公式编辑器

示例

看图片所示
在线数学公式编辑器

配置博客

基于上一步,我们对博客修改相应的配置,我们用到_config.yml文件,下面是该文件的默认参数信息:

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title: #标题
subtitle: #副标题
description: #站点描述,给搜索引擎看的
author: #作者
email: #电子邮箱
language: zh-CN #语言
# URL #链接格式
url: #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master
  • 注意
    特别提醒,在每个参数的:后都要加一个空格

  • 修改网站相关信息

    title: Time渐行渐远
    subtitle:Coding Changing The World
    description: 时间渐行渐远
    author: Hushiwei
    language: zh-CN
    timezone: Asia/Shanghai

    配置部署(修改成自己的)

    deploy:
    type: git
    repo: https://github.com/Timehsw/Timehsw.github.io.git
    branch: master

增加站内搜索Local Search

安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

$ npm install hexo-generator-searchdb --save

编辑 站点配置文件,新增以下内容到任意位置:

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

编辑 主题配置文件,启用本地搜索功能:

# Local search
local_search:
  enable: true

绑定自己的域名(可选)

首先获取 gitpage 的 ip 地址

hushiweideMacBook-Pro:myblog hushiwei$ ping timehsw.github.io
PING github.map.fastly.net (151.101.100.133): 56 data bytes
64 bytes from 151.101.100.133: icmp_seq=0 ttl=52 time=63.278 ms
64 bytes from 151.101.100.133: icmp_seq=1 ttl=52 time=63.262 ms
64 bytes from 151.101.100.133: icmp_seq=2 ttl=52 time=64.162 ms
64 bytes from 151.101.100.133: icmp_seq=3 ttl=52 time=64.281 ms
^C
--- github.map.fastly.net ping statistics ---

注意: 这里ip可能会变,多ping几次,发现ip不变后,再进行下面的域名和ip的映射.

设置域名与 ip 的解析

如图所示,增加两条即可,除了 ip 地址写成自己的,其他的都一样.
gitpage

增加 CNAME

在 hexo 博客的 source 文件夹下新建一个名为CNAME的文件,无后缀名.内容为你的域名.即可

问题

  • 部署的时候出现 hushiweideMacBook-Pro:test hushiwei$ hexo deploy
    ERROR Deployer not found: git
  • 解决办法 npm install hexo-deployer-git --save
    重新 deploy 即可
  • 阅读全文 $xslt <!-- more --> 用这个手动截断更合适