用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 --> 用这个手动截断更合适