使用Hexo 搭建自己的博客

使用Hexo 搭建自己的博客

最近一直都想着如何去搭建属于自己的博客，有空的时候就写写文章什么的。
本人对该博客系统的要求是：

  • 博文的编写要采用现在流行的MarkDown来进行编写。
  • 本人还不想去注册域名和云服务器（这些可都是钱啊）。
  • 博文系统需要开源且易上手的。

通过以上的这些分析，我采用了hexo和github来进行开发部署搭建自己的博文系统。

当然了网上也有很多教程，但是我觉得总结的还是有些不全面。现在我将结合我自己搭建好的博文系统综合总结。不喜勿喷。）

本机开发环境

  • win10 家庭版
  • node.js 6.9.2
  • git 2.11.1
  • github账户一枚
  • hexo 1.0.2

先学习一些概念啊

什么是Hexo

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者 @tommy351的话：

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

GitHub Pages是什么？

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定， 可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site，二者之间的差异可以戳GitHub Pages 。基于 GP 创建Site是很方便的，这有一个简单的教程： 学习 Github Page 教你分分钟搭建自己的博客

gp 生成的网站的默认域名是 username.github.io 或者 username.github.io/project-name ，但gp是支持自定义域名的：Custom Domain Name 。购买域名之后，可以和默认的二级域名进行绑定，教程参考：购买域名、设置DNS

更多关于gp的信息，可以戳：Github Pages Help

上面哔哔了那么多，现在可以正式开始操练一把啦

1. 安装node.js

这个是必须的安装的哦。这个安装其实很简单，网上教程一大把我就不在此赘述了。node.js安装传送门

2. 安装git

这个是必须的安装的哦。这个安装其实很简单，网上教程一大把我就不在此赘述了。git安装传送门

3. hexo安装

  • 在windows命令行中执行下面的命令
npm install -g hexo
  • 查看是否安装成功，执行下面的命令
hexo --version

 

安装成功hexo

安装成功hexo

 

  • hexo 命令解释
    enter description here

    help 查看帮助信息
    init[文件名] 创建一个hexo项目，不指定文件名，则在当前目录下创建
    version 查看hexo版本
    --config config-path 指定配置文件、代替默认的_config.yml
    --cwd cwd-path 自定义当前工作目录
    --debug 调试模式，输出所有日志信息
    --safe 安全模式，禁用所有的插件和脚本
    --silent 无日志输出模式

4. 创建hexo项目

  • 执行新建一个hexo项目命令
hexo init blogsDemo

项目内的目录结构如下：
enter description here
通过上面的命令，我们创建一个hexo的blogsDemo项目，并且自动生成一篇博文hello word。接下来我们需要在本地测试下这个项目能否跑得起来。

这个项目大概大小28.3M。如果哪位生成的时候报错或者大小差太多，那么请从新创建并且配置翻墙工具。

  • 安装项目依赖库
npm install
  • 本地测试博文系统
hexo server

在浏览器中输入：http://localhost:4000/

 

enter description here

运行效果

 

到此为止我们就完成了hexo开发环境搭建、测试工作。那么接下来我们讲下这个项目中的配置文件。

5. hexo目录文件解析

 

enter description here

hexo项目目录结构

 

1、 scaffolds ：模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局： post 、 page 和 draft ，它们分别对应不同的路径。新建文件的默认布局是 post ，可以在配置文件中更改布局。用 draft 布局生成的文件会被保存到 source/_drafts 文件夹。

2、 source ：资源文件夹是存放用户资源的地方。

3、 source/_post ：文件箱。（低版本的hexo还会存在一个 _draft ，这是草稿箱）除 _posts 文件夹之外，开头命名为 _ (下划线)的文件/ 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去

4、 themes ：主题 文件夹。Hexo 会根据主题来生成静态页面。

5、 themes/landscape ：默认的皮肤文件夹

6、 _config.yml ：全局的配置文件，每次更改要重启服务。

低版本的Hexo还会生成scripts文件夹，里面用于保存扩展Hexo的脚本文件。

全局配置文件 _cofing.yml 解析

下面的代码文件详细的介绍了该配置文件的用法

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

# Site 站点配置
title: P了个F #网站标题
subtitle: 码农世界 #网站副标题
description: 我是一个来自体育世界的码农 #网站描述
author: 杨朋飞 #作者
language: zh-CN #网站使用的语言
timezone: Asia/Shanghai #网站时区

# URL #可以不用配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
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 #Incloude code 文件夹
i18n_dir: :lang #国际化文件夹
skip_render: #跳过指定文件的渲染，您可以使用glob来配置路径

# Writing 写配置
new_post_name: :title.md #新文章的文件名称
default_layout: post #默认布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把文件名转换为（1）小写或（2）大写
render_drafts: false #显示草稿
post_asset_folder: false #是否启动资源文件夹
relative_link: false #把链接改为与根目录的相对地址
future: true
highlight: #代码块的设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# 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 #每页显示的文章量（0=关闭分页功能）
pagination_dir: page #分页目录

# Extensions 扩展
## Plugins: https://hexo.io/plugins/ 插件
## Themes: https://hexo.io/themes/ 主题
theme: landscape #当前主题名称

# Deployment #部署到GitHub
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: http://github.com/yangpengfei/yangpengfei.github.io.git
  branch: master

一般主题下有一个 languages 文件夹，用于对应 language 配置项。

1. language 的配置项是 zh-CN ，则会在 languages 文件夹下找到 zh-CN.yml 文件中对应的项来解释。修改全局配置时，注意缩进，同时注意冒号后面要有一个空格。 2. language和timezone都是有输入规范的，详细可参考[语言规范][14]和[时区规范][15]。

主题配置

主题的配置文件在 /themes/主题文件夹/_config.yml ，一般包括导航配置(menu)，内容配置(content)，评论插件，图片效果(fancybox)和边栏(sidebar)。

Hexo提高了大量的主题，可以在全局配置文件中更改主题：

# Extensions 扩展
## Plugins: http://hexo.io/plugins/ 插件
## Themes: http://hexo.io/themes/ 主题
theme: 你的主题名称

主题的文件目录必须在 themes 目录下。 Hexo主题更换教程
更多Hexo主题戳此： Hexo Themes。

6. 新建一篇博文

  • 在windows命令行中输入如下命令：

hexo new [layout] <title> 其中layout是可选参数，默认值为 post 。
如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，需用引号括起来。

Hexo提供的layout在 scaffolds 目录下，也可以在此目录下自建layout文件。新建的文件则会保存到 source/_post 目录下。

hexo new '第一篇博文'

 

enter description here

第一篇博文

 

  • 使用sublimeText或者你认为其他好用的工具都行，接着就可以欢快的进行写博文啦~~~~
    enter description here

  • 接着我们可以使用hexo server启动服务，就看在浏览器中看到我写的这个博文啦。

  • 小技巧

发表的文章会全部显示，如果文章很长，就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可：

以上是摘要
<!--more-->
以下是全文

 

enter description here

1488621382866.jpg

 

刷新，就能够看到只显示摘要了，同时会提供 Read More 的链接：
enter description here
这个文字可以更改，在主题的配置文件( themes/主题文件夹/_config.yml )中，找到 Content ：

# Content
excerpt_link: Read More #可以更改成想要显示的文字
fancybox: true

此外，可以修改文章的模板参数，打开 scaffolds/post.md ，增加类别和描述：

---
title: {{ title }}
date: {{ date }}
tags:
---
在部署hexo博文之前，需要通过命令把所有的文章（.md文章）都做静态化处理，就是生成对应的html, javascript, css，使得所有的文章都是由静态文件组成的：
hexo generate

 

enter description here

生成静态文件

 

在本地目录下，会生成一个public的目录，里面包括了所有静态化的文件。

总结：

到此为止我们已经学习了：

  1. 如何创建hexo项目
  2. 如何设置全局配置文件_config.yml
  3. 如何设置主题
  4. 如何发布一篇博文
  5. 如何将markdown格式的博文生成静态文件。

将hexo部署到github

注册Github账号

这里我们就不多讲了，小伙伴们可以点击这里，进入官网进行注册。

创建仓库

 

enter description here

1488622729726.jpg

登录账号后，在Github页面的右上方选择New repository进行仓库的创建。

 

 

创建仓库

1488622775546.jpg

 

在仓库名字输入框中输入：
你的github用户名.github.io
然后点击Create repository即可。

生成添加秘钥

在windows命令行中输入下面的命令

ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路回车过来就好，待秘钥生成完毕，会得到两个文件id_rsa和id_rsa.pub，用带格式的记事本打开id_rsa.pub，Ctrl + a复制里面的所有内容，然后进入https://github.com/settings/ssh：

 

enter description here

1488623060458.jpg

 

将复制的内容粘贴到Key的输入框，随便写好Title里面的内容，点击Add SSH key按钮即可。

配置_config.yml

deploy:
  type: git
  repo: http://github.com/yangpengfei/yangpengfei.github.io.git
  branch: master

这里输入的地址我们需要注意：http和https，这里我选择的是http。由于我没有将ssl添加到github上面，所以我采用http。

安装hexo-deployer-git

npm install hexo-deployer-git --save

执行hexo deploy推送到 githu

hexo deploy

在执行这个命令的时候，会提示我们输入github的账号和密码。

以后我们需要写一篇博文怎么办？？？

  1. 只要在blog目录下的source_posts下面添加.md文件就行了，我们也可以使用 执行hexo new命令来创建并进行编写。
  2. 推送到github。
hexo clean
hexo generate
hexo deploy

参考文章

简洁轻便的博客平台: Hexo详解
hexo —— 简单、快速、强大的Node.js静态博客框架
20分钟教你使用hexo搭建github博客
HEXO+Github,搭建属于自己的博
Hexo折腾记——基本配置篇

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ypfnet/p/6502532.html