有人可能会问有了
简书
为什么还需要博客
?身为一个程序猿
怎么能没有一个自己的博客
呢!虽然有了简书
,但是博客
不受任何第三方管理,并且还能自定义成自己喜欢的界面,下面就开始讲一下搭建的方法。
Hexo
是一款基于 Node.js
的博客框架,应该是目前最流行的博客框架了,使用起来比较简单,以下是 我的博客 页面:
安装搭建博客必须的环境
1. 安装 Git
这里就不说怎么安装了,相信会看这篇文章的一般都已经装了。
2. 申请 GitHub 账号
博客
的 远程创库
、域名
、服务器
等都和 GitHub 有关,这个必须要。
3. 安装 Node.js
前往 Node.js 官网 下载最新版本的安装包安装即可。
4. 安装 Hexo
打开终端,输入以下命令安装 Hexo
,安装时间可能有点长,要多等一下。
npm install hexo-cli -g
开始搭建博客
以上环境必须全部安装完成后,才能开始搭建 博客
。
1. 创建 GitHub 仓库
打开 GitHub 创建一个仓库,Repository name
为 xxx.github.io
,xxx
处就是你 GitHub
的用户名,也就是前面 Owner
处显示的名字,命名必须这样,不能更改,这个仓库的名字也会是 博客
搭建完成后的域名。
2. 初始化 Hexo 博客
打开终端,执行以下命令初始化 博客
,初始化完成后,你的系统根目录中会多一个名为 Blog
的文件夹,Blog
也可以更改成自己喜欢的名字,初始化时间也比较久,耐心等一下。
hexo init Blog
3. 下载博客主题
博客
初始化完成以后,会有一个自带的博客主题
,在Blog / themes
文件夹下,但是比较丑,你可以下载一个自己喜欢的博客主题
。这里是
博客主题
的 下载地址 ,只需要到主题对应的GitHub
仓库将主题clone
下来即可,这是我使用的主题 下载地址 。clone
完成后,将主题文件夹复制到Blog
文件夹下的themes
文件夹中。
4. 修改博客配置文件
打开
Blog
文件夹下的_config.yml
文件,修改其中的配置。下面把几个必须修改的配置列出来按需求修改即可,配置的键值之间一定要有空格,否则会报错,想了解更多配置点击 这里 。
title: Jonzzs //博客的标题
subtitle: 个人博客 //博客的副标题
description: 将来的你 一定会感激现在拼命的自己 //博客的描述
author: Jonzzs //博客作者的名字
language: zh-Hans //语言中文
theme: new-vno //刚刚复制到 themes 文件夹下的主题名称
deploy:
type: git //使用 Git 发布
repo: https://github.com/Jonzzs/Jonzzs.github.io.git //刚创建的 Github 仓库地址
- 关于主题的配置在各自主题文件夹下的
_config.yml
文件中修改。
5. 写博客文章
- 接下来可以开始写你的第一篇
博客
文章了,博客文章保存在Blog / source / _posts
文件夹下,格式为MarkDown
格式,也就是.md
后缀的文件,编码格式为UTF-8
,否则会显示乱码。
例如: 创建一个名为 测试文章.md
的文件,内容为:
---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: 测试分类 //分类名称
tags: 测试标签 //标签名称
photos: http://jonzzs.cn/images/Jonzzs.jpg //需要展示的图片地址
---
> 这是一篇测试文章。
注意: 每一篇文章中,开头都必须有 ---
之间的那些参数,参数 :
后面必须有空格,文章的 标题
是必填的,否则文章不会显示在博客中,其他参数看自己的需求填写,categories 、tags 、photos
这三个参数可填写多个,填写多个时用 [ xx, xx ]
格式区分,例如:
---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: [测试分类1, 测试分类2, 测试分类3] //分类名称
tags: [测试标签1, 测试标签2, 测试标签3] //标签名称
photos: [http://jonzzs.cn/images/Jonzzs.jpg, http://jonzzs.cn/images/Jonzzs.jpg, http://jonzzs.cn/images/Jonzzs.jpg] //需要展示的图片地址
---
- 如果要在博客的首页显示每篇文章的
摘要
,只要在文章中加入以下分隔符
即可,该分隔符
之前的所有内容都会被自动截取为文章的摘要
。
<!-- more -->
6. 本地测试博客
- 打开终端
cd
到Blog
目录下,输入以下命令:
hexo s
- 接着浏览器中输入 http://localhost:4000/ 就能够看到
博客
的搭建效果。
发布博客
本地显示没问题以后,就可以将 博客
发布到 GitHub
服务器上了。
1. 安装自动部署发布插件
第一次配置时需要安装 hexo-deployer-git
自动部署发布工具,打开终端 cd
到 Blog
目录下,执行以下命令安装。
npm install hexo-deployer-git --save
2. 发布博客到服务器
- 打开终端
cd
到Blog
目录下,输入以下命令:
hexo clean && hexo g && hexo d
如果这是你的第一次,终端可能会让你输入
Github
的邮箱和密码,输入完成后,就会把你的博客
自动上传至Github
了。以后在每一次添加新的
博客
文章或者改变配置时,执行一下这个命令就可以直接发布了。发布完成后,浏览器中输入之前创建的
Github
仓库名,就能访问到你搭建的博客
了,我的是 Jonzzs.github.io 。
简单的
博客
搭建流程就是这样了,还有很多不错的 插件 ,比如评论
、标签
、统计
等等,这些自己去研究并慢慢完善自己的博客吧。
将来的你,一定会感激现在拼命的自己,愿自己与读者的开发之路无限美好。