有时候我们希望有一个受控的博客,来记录或分享一些东西。这个博客的主题内容由你自己来决定,可以是技术分享(编程、汉化分享等),也可以是生活感想。
本文将介绍一个可以迅速搭建并部署的受控博客。阅读本文前,希望你对以下知识点有所了解:
-
git(版本控制)
的基础使用 -
markdown
的使用
为什么要搭建博客
在线类博客有很多选择,为什么我们需要从零搭建新的博客呢?自己搭建的博客有什么好处吗?
首先,前文所提的 “博客受控”,指的就是能够自己控制的博客的样式、内容等,自己想怎么改就怎么改。
内容受控是指我们知道在线类的博客是受平台限制的,这意味着你所发表的内容是需要受审才能发出的,一些敏感的技术词汇,该篇文章都可能会被和谐或被删除。但在自己搭建博客就没有这样的问题,最起码能保留源文件。
其二,博客的样式是受控的。像著名在线博客CSDN
上一些博主的文章确实是有学习参考的价值,但问题的是该站广告是在是太多了,字体和排版的阅读体验并不太好。但如果是自己搭建的博客的话,就可以自己着手优化这些问题。
但博客的搭建还需要我们从各方面考虑利弊。平台类博客会有相应的推荐系统,会对同类型文章相互引流,在 SEO 方面会做得比我们好。
个人搭建的博客,刚起步时的浏览量并不高,但是可以通过SEO
等方式来逐步增加自己网站的权重。或者提高博客的质量和干货,读者认为文章有价值,自然会收藏起来形成熟客。
那么博客能写什么东西呢?在日常生活中,有很多知识点是呈碎片状,写博客的本质上就是对自己知识的一种梳理,然后再将这些知识分享出来,可能会有对这方面知识有疑惑,或者想找到解决方案,自身分享出来的东西能给读者做一定的参考。同时这也会是一个良性循环,因为分享的同时,你可能也需要去查询一些资料,同时也可以找到别人遇到过并分享出来的解决方案,是一个相互收益的过程。
我们的基本需求是梳理与分享,那么更应该把注意力放在内容本身,网站布局的排版样式等则是增加读者阅读体验的问题。因此我们可以使用现成的博客框架快速完成这些事。
博客框架有很多种选择,笔者选择的是 Hexo,因为它足够便捷优雅。
start
Hexo
依赖 Node.js 和 NPM
包管理,Node.js
安装后一般会自带NPM
。
我们打开终端(Windows PowerShell / cmd.exe
、bash
、macOS
里的终端),输入以下命令:
# 检查 npm 是否安装成功
npm -v
# 安装 hexo cli,
# 如果安装速度过慢的话,可以安装国内的淘宝镜像
# 在命令行输入 ` npm install -g cnpm --registry=https://registry.npm.taobao.org`
npm install -g hexo-cli
# 检查 hexo 是否安装成功,并查看版本
hexo -v
依赖安装成功后,我们可以在命令行输入 hexo help
查看使用方式(描述是英文,示例部分笔者将其转为中文):
Usage: hexo
command | description |
---|---|
help |
获取命令的帮助 |
init |
创建一个新的 Hexo 文件夹 |
version |
显示版本信息 |
使用 hexo help [command]
可以查看更多的信息, 如:
hexo help init
# Usage: hexo init [destination]
# Description(描述):
# 在指定的路径或当前目录中创建一个新的Hexo文件夹.
# Arguments(参数):
# destination 文件夹路径。 如果未指定,则在当前文件夹中初始化
# Options(选项):
# --no-clone 复制文件而不是从GitHub克隆
# --no-install 跳过 npm 依赖安装(默认初始化会自动装依赖)
全局选项:
options | description |
---|---|
--config |
指定配置文件而不是使用默认的 _config.yml |
--cwd |
指定 CWD |
--debug |
显示终端中的所有详细消息 |
--draft |
显示草稿帖子 |
--safe |
禁用所有插件和脚本 |
--silent |
在控制台上隐藏输出 |
在官网 commands 中可以找到全部完整的解释。
建站
在终端上,我们可以看到有一个 init
的命令,我们可以使用这个命令来初始化 hexo
项目,但再建站之前我们需要先决定在哪里存放博客源代码。
我推荐使用如微软的 OneDrive(win10 系统自带)之类的云文件夹。你可以白嫖它 5G 的云储存空间。当你在设备A
下修改了文件,它会自动同步到云端上。切换回设备B
并登录账号后,它又会自动从云端下载数据,是一个便捷的方式。
但值得注意的是 OneDrive
毕竟是国外服务,由于众所周知的原因可能需要科学上网才能使用。该方式只是数据备份与同步的问题,不使用它也不会影响下文的构建。
# 如果你是 unix 系统的话,可以使用该命令查看当前路径
pwd
# /Users/anran/OneDrive
# 初始化文件夹名为 blog
hexo init blog
# INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
# other install info ...
# 进入文件夹
cd blog
安装完成后目录如下:
.
├── _config.yml (网站的配置信息)
├── package.json (应用依赖信息)
├── node_modules (依赖包)
├── scaffolds (模板文件)
├── source (资源文件夹是存放用户资源的地方)
| ├── _drafts (草稿文件夹,刚初始化时可能不存在)
| └── _posts (文章/帖子源码列表)
└── themes (主题)
配置
建站完成后我们需要进行 配置,hexo
中主要有两项配置。一项是站点配置文件
,路径为 /_config.yml
。另一项是主题配置文件
,路径是/themes/(下载的主题)/_config.yml
。
我们可以先在站点配置文件
修改以下基础选项:
# Hexo Configuration
# 网站主标题,SEO元素之一
title: blog
#网站副标题,可选
subtitle:
# 网站描述, SEO元素之一,用于告诉搜索引擎关于这个站点的描述
description: 分享生活、分享技术
# 网站的关键词,如:
keywords: Front end
# 网站作者
author: anran758
# 网站使用的语言, 由于 Hexo 具备多语言配置,默认为英文,我们需要修改回中文语言
language: zh-CN
启动
初始化项目后默认会安装相关的依赖,接着在命令行输入如下命令来运行博客:
# 启动服务,默认端口为 4000,启动服务后可以在浏览器输入 `http://localhost:4000` 查看效果
hexo server
# or 简写方式
hexo s
# 还可以使用 -p, 指定 9000 端口
hexo s -p 9000
写作步骤
我们一般通过命令行来操作博客:
比如创建文章的方式如下: hexo new [layout]
layout
是指定布局,Hexo
默认有post
、page
和 draft
三种布局,它们分别对应不同的路径。我们也可以自定义布局,但实际页面会和post
相同,都将储存到source/_posts
文件夹。
按照我个人的写作习惯,通常写作步骤是:
- 创建草稿(
drafts
) - 在草稿上进行写作
- 整理细节并在本地服务器上查看效果(
server
) - 发布至正式的帖子上
- 生成静态文件并部署(后续讲)
创建草稿(drafts
)
$ hexo new draft "My first post"
# INFO Created: ~/blog/source/_drafts/My-first-post.md
在初次创建草稿会生成一个名为 _drafts
的草稿文件夹,接着该文件夹下有一个我们刚刚创建的草稿,名为 My-first-post.md
的 markdown
文件,文件内容如下:
---
title: My first post
tags:
---
在本地服务器查看草稿(drafts
)
我们可以启动本地服务器一边写作一边预览,但默认情况下草稿是不会被展示出来的,如果你想查看草稿的话,可以输入以下命令:
$ hexo s -p 9000 --draft
# INFO Start processing
# INFO Hexo is running at http://localhost:9000 . Press Ctrl+C to stop.
# 如果需要退出服务器,按住 control + c
发布草稿(publish
)
如果我们在本地服务器上校队完草稿细节后,可以将草稿发布为文章,否则在后续生成博客静态文件时不会被打包出来:
# hexo publish [layout]
# 将草稿发布为文章
$ hexo publish post My-first-post
# INFO Published: ~/blog/source/_posts/My-first-post.md
输入命令后你可以发现发布的文章被转移到了source/_posts/
上,这样就完成了本地的文章发布。
生成静态文件(generate
)
Hexo
框架的一项工作就是将源文件 markdown
最后生成为 HTML
:
# 生成文件
$ hexo generate
# INFO Start processing
# INFO Files loaded in 275 ms
# INFO Generated: 2019/08/11/My-first-post/index.html
# INFO 1 files generated in 152 ms
# 简写形式
$ hexo g
# 监控文件变化,并生成静态文件
$ hexo g --watch
# 生成文件并部署(部署后面单独章节来讲解)
$ hexo g -d
主题
我们熟悉完博客系统的操作后,接下来就是美化博客。Hexo
支持主题,我们可以根据官网的创建主题教程自己来设计,也可以直接在主题商城 中找现成的主题。这里以笔者推荐的主题 Next
为例:
笔者一开始使用 next
主题时,版本才 5.x
,当时仍有很多博客所需的东西没有集成。如今回头一看,发现 next
升级了好几个大版本。github 主题仓库也迁移至了 https://github.com/theme-next
里,乃至文档都有两个不同的版本。
新文档是采用它自身主题的一个scheme
来建成,是全英文文档,可以保证信息资料是最新的。旧文档布局便于阅读,同时是中文文档,大多参数也能在该文档找到,但毕竟没有再过多的维护,建议还是以最新文档为参考。
安装主题可以通过git clone
克隆至blog/theme/
下:
$ pwd
# /Users/anran/OneDrive/Blog
# 启动主题前需要清除缓存与已部署的文件
$ hexo clean
# clone 主题
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
接着在 站点配置文件(/_config.yml)
中启动 theme
。再打开主题配置文件(/themes/next/_config.yml)
选择 Scheme:
# _config.yml
- theme: landscape
+ theme: next
# /themes/next/_config.yml
# 提供三种模式
#scheme: Muse
#scheme: Mist
scheme: Pisces
评论、订阅、数据统计、SEO 等部分功能配置已经集成至 next
主题配置中,但大多还需要额外添加依赖还需要根据文档来配置。next
在主题配置中集成了由于配置自定义项过多,读者可以根据自己所需添加相应的统计、SEO 相关的 app key
等就不进一步展开讲。
部署
我们使用git
进行部署,可以将网站部署至私人服务器、也可以部署到免费的github pages
上。本文将介绍部署至github
的方法,如果你还没有github
账号的话,那你需要先注册一个账号。
步骤如下:
访问
github.com
,点击sign up
注册账号。-
进入注册页,输入账号密码和邮箱,输入验证码!
-
选择免费用户
-
接着是关于
github
推荐服务的调查,当然你也可以跳过它. -
验证完毕后,它会提示你创建一个仓库,这里我们先创建一个
blog
。 -
复制仓库链接,copy 至
站点配置文件(/_config.yml)
里。同时安装hexo-deployer-git
的依赖:npm install hexo-deployer-git --save
url: https://yourname.github.io/blog # 修改为 github io 的地址 root: /blog/ # 要将资源映射到仓库名 deploy: type: git repo: https://github.com/yourname/blog.git # blog 的 git 地址 branch: gh-pages # 发布至 gp-pages 分支,如果该分支不存在,就会自动创建它
-
接着开始部署。如果你还没配置
git
账号的话,它会提示你输入账号密码,输入正确的账号密码后就部署成功了。# 或者使用`hexo d -g`, 两者是等价的效果 hexo g -d # *** Please tell me who you are. # Run # git config --global user.email "you@example.com" # git config --global user.name "Your Name" # to set your account's default identity. # Omit --global to set the identity only in this repository. # fatal: unable to auto-detect email address (got '29625@DESKTOP-0R7P8H4.(none)') # Logon failed, use ctrl+c to cancel basic credential prompt. # Username for 'https://github.com': anran758 INFO Start processing INFO Files loaded in 621 ms INFO 0 files generated in 424 ms INFO Deploying: git INFO Clearing .deploy_git folder... INFO Copying files from public folder... INFO Copying files from extend dirs... INFO Congratulations! Your are using the latest version of theme NexT. Enumerating objects: 131, done. Counting objects: 100% (131/131), done. Delta compression using up to 8 threads Compressing objects: 100% (91/91), done. Writing objects: 100% (131/131), 257.72 KiB | 2.48 MiB/s, done. Total 131 (delta 43), reused 0 (delta 0) remote: Resolving deltas: 100% (43/43), done. To https://github.com/yourname/blog.git * [new branch] HEAD -> gh-pages Branch 'master' set up to track remote branch 'gh-pages' from 'https://github.com/yourname/blog.git'. # 如果没有配置全局 git 账号的话可以先配置,不然下次部署还是会提示你输入账号密码 git config --global user.email "you@example.com" git config --global user.name "Your Name"
接着在我们创建的
blog
下进入settings
项,设置github pages
为gh-pages
也就是之前在配置里设置的分支即可。这样就可以在线上查看我们部署的状况啦~
优化与扩展
下面介绍一下文档中没有提到的相关问题与扩展。
本地搜索
next
有内置本地搜索的配置项,但文档上说明需要额外安装 hexo-generator-searchdb
这个依赖。但该项目现在已经被归档了,它还存在一些问题没有修复。你可以使用 hexo-generator-search 来代替它。接者在站点配置文件
添加如下配置:
# Expansion: hexo-generator-search
# 站内搜索
# https://github.com/wzpan/hexo-generator-search
search:
path: search.xml
field: post
format: html
limit: 10000
在使用本地搜索功能时,你可能会遇到以下错误:
This page contains the following errors:
error on line 86 at column 35: Input is not proper UTF-8, indicate encoding !
Bytes: 0x08 0xE8 0xB7 0x9F
Below is a rendering of the page up to the first error.
出现这种错误原因大多是因为搜狗输入法带来的特殊字符串,我们在源码中替换它即可。打开编辑器(比如vscode
),在全局搜索错误信息Bytes
第一个字节 /x08
替换为空。
github emoji
如果你希望在博客中支持 emoji
的话,你可以安装 hexo-filter-github-emojis
# Use Github Emojis
# Docs: https://github.com/crimx/hexo-filter-github-emojis
githubEmojis:
enable: true
className: github-emoji
unicode: false
styles:
localEmojis:
sitemap
为了让搜索引擎能找到我们的网站,我还需要给搜索引擎的网络蜘蛛提供站点地图文件。
# hexo sitemap 生成器以及百度的 sitemap 生成器
npm install hexo-generator-sitemap hexo-generator-baidu-sitemap --save
依赖安装完后在站点配置文件
中添加如下配置:
# Expansion: hexo-generator-sitemap
# generate sitemap.
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
path: sitemap.xml
# Expansion: hexo-generator-baidu-sitemap
# 针对百度进行优化的 sitemap,作者还是建议手动提交至百度会比较好
# https://github.com/coneycode/hexo-generator-baidu-sitemap
baidusitemap:
path: baidusitemap.xml
设置无分页的归档
如果你期望将归档目录在一页中全部加载出来,那么你可以添加如下配置:
# hexo-generator-archive
# 该插件默认内置于 hexo 中,只需参考文档添加配置即可
# https://github.com/hexojs/hexo-generator-archive
archive_generator:
per_page: 0
图片的引入
在 hexo
中引用图片主要有两种方式:
- 在本地通过资源文件夹引入
- 使用图床
在本地资源的引入,需要修改 _config.yml
的配置:
post_asset_folder: true
设置完选项后,以后每次使用 hexo new [layout]
后就会生成一个同名的文件夹。然后可以使用 {% asset_img slug [title] %}
来引入图片资源:
{% asset_img banner.png banner %}
这里是一段示例内容。
该方法的缺点是需要占用本地资源,如果你是使用 git
进行部署,因为使 .git
文件变大(即便删除了该文件,它还会存在 git
的 commit 信息中)。
第二种方式可以使用图床,免费图床有个问题就是服务可能会不稳定,风险不由自己掌控,相对没那么保险。但是它能节省空间,甚至在网络传输上下载速度更快。如果使用图床的话,可以尝试新浪微博图床,将插件下载至 chrome
,登录后即可上传得到相应的 url
.
README
默认情况下,将源码生成部署至服务器会将上一次生成的数据覆盖掉。如果你期望在 github
上保留一个 README.md
给读者看说明的话,可以通过 _config.yml
来设置它:
skip_render: ['images/loading.gif', 'README.md']
原文出自: 从搭建到部署,快速构建一个私人博客 - anran758's