使用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 命令解释
help 查看帮助信息
init[文件名] 创建一个hexo项目,不指定文件名,则在当前目录下创建
version 查看hexo版本
--config config-path 指定配置文件、代替默认的_config.yml
--cwd cwd-path 自定义当前工作目录
--debug 调试模式,输出所有日志信息
--safe 安全模式,禁用所有的插件和脚本
--silent 无日志输出模式
4. 创建hexo项目
- 执行新建一个hexo项目命令
hexo init blogsDemo
项目内的目录结构如下:
通过上面的命令,我们创建一个hexo的blogsDemo项目,并且自动生成一篇博文hello word
。接下来我们需要在本地测试下这个项目能否跑得起来。
这个项目大概大小28.3M。如果哪位生成的时候报错或者大小差太多,那么请从新创建并且配置翻墙工具。
- 安装项目依赖库
npm install
- 本地测试博文系统
hexo server
在浏览器中输入:http://localhost:4000/
到此为止我们就完成了hexo开发环境搭建、测试工作。那么接下来我们讲下这个项目中的配置文件。
5. 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 配置项。
主题配置
主题的配置文件在 /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 '第一篇博文'
-
使用sublimeText或者你认为其他好用的工具都行,接着就可以欢快的进行写博文啦~~~~
-
接着我们可以使用
hexo server
启动服务,就看在浏览器中看到我写的这个博文啦。 -
小技巧
发表的文章会全部显示,如果文章很长,就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可:
以上是摘要
<!--more-->
以下是全文
刷新,就能够看到只显示摘要了,同时会提供 Read More 的链接:
这个文字可以更改,在主题的配置文件( themes/主题文件夹/_config.yml )中,找到 Content :
# Content
excerpt_link: Read More #可以更改成想要显示的文字
fancybox: true
此外,可以修改文章的模板参数,打开 scaffolds/post.md ,增加类别和描述:
---
title: {{ title }}
date: {{ date }}
tags:
---
hexo generate
在本地目录下,会生成一个public的目录,里面包括了所有静态化的文件。
总结:
到此为止我们已经学习了:
- 如何创建hexo项目
- 如何设置全局配置文件
_config.yml
- 如何设置主题
- 如何发布一篇博文
- 如何将markdown格式的博文生成静态文件。
将hexo部署到github
注册Github账号
这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册。
创建仓库
登录账号后,在Github页面的右上方选择New repository进行仓库的创建。
在仓库名字输入框中输入:
你的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:
将复制的内容粘贴到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的账号和密码。
以后我们需要写一篇博文怎么办???
- 只要在blog目录下的source_posts下面添加.md文件就行了,我们也可以使用 执行
hexo new
命令来创建并进行编写。 - 推送到github。
hexo clean
hexo generate
hexo deploy
参考文章
简洁轻便的博客平台: Hexo详解
hexo —— 简单、快速、强大的Node.js静态博客框架
20分钟教你使用hexo搭建github博客
HEXO+Github,搭建属于自己的博
Hexo折腾记——基本配置篇