详解 Hexo 免费搭建博客

用 Hexo 搭建博客，跨平台，既方便速度又快，易入手，可定制性高，还可免费部署。🌐

测试环境：Ubuntu 18.04，Windows 10。

〇、 `Hexo` 简介

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

一、环境搭建

1. 安装 `Git`

在 `Ubuntu` 上

sudo apt install git

安装好后，检查一下是否成功：

git --version

在 `Windows` 上

进入下载页面，然后点击 Click here to download manually ，等待下载完成，再点击安装。

首先这个不管它，点 Next > 即可。

接下来是设置安装目录，按照您的习惯设置就好。

下一个按照默认的就好了，~~反正我也看不懂，~~当然您也可以自己设置。

后面这个同理。

下面这个是选择 Git 的默认编辑器。这里我就选择默认的 Vim ，毕竟能在控制台上直接用，方便一些。当然如果您愿意也可以换其他的。

这个就用推荐的吧，如果愿意的话也可以改。

同理。

这个用默认的控制台就好了：

最后一关，我就默认了：

等它安装完就好了：

我才不想看日志呢：

2. 安装 `Node.js` 及 `npm`

我们还需要安装 Node.js 和 npm 。

在 `Ubuntu` 上

2-1 方案一

注意！请先不要贸然执行以下指令！浏览本小节之后再做决定。

sudo apt install nodejs
sudo apt install npm

安装完后，检查一下：

在官方文档里可以看到

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

Node.js (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)

Git

所以说这个版本有点老了……如果您和我一样更喜欢新版，就请继续看下一节。如果您觉得已经足够了，就按照上面的步骤做并跳过下一节吧：

2-2 方案二

如果您已经执行了上面的步骤，那我只好说声抱歉……执行下面的命令以卸载 Node.js ：

sudo apt remove nodejs
sudo apt autoremove

2-2-1下载安装 `Node.js`

点开 Node.js 的链接，我们可以看到：

当然，如果您更希望看中文，没关系，点右上角那个谷歌翻译的图标或者用这个链接（效果相同）即可（然而这个页面我们只需要使用一次）：

点击按钮之后，就会下载相应的 .tar.xz 压缩包。建议下载 LTS（长期支持版）。

下载完成后，转到下载目录，点击 .tar.xz 压缩包“提取到此处”。喜欢命令行的朋友也可以执行命令：

tar -xvf node-*.tar.xz

我这里运行的命令是：

tar -xvf node-v12.15.0-linux-x64.tar.xz

将解压后的文件夹放到您想要的位置并改名。用命令就是：

mv node-* *	#可能要加 sudo

我运行的是：

mv node-v12.15.0-linux-x64 ~/nodejs

2-2-2 设置全局环境变量。

先登录 root ：

sudo -i

然后执行下列命令

echo `PATH="$PATH:*/bin"` >> /etc/profile	#*就是您安装 Node.js 的目录

我用的是：

echo `PATH="$PATH:/home/csj/nodejs/bin"` >> /etc/profile

然后就加载并登出吧：

source /etc/profile
exit

再测试是否成功：

可以看到 Node.js 已是最新版啦！$\mathscr{P}\mathcal{erfect!}$

在 `Windows` 上

点开 Node.js 的链接，我们可以看到：（不得不说 Node.js 的更新很快啊）

当然，如果您更希望看中文，没关系，点右上角那个谷歌翻译的图标或者用这个链接（效果相同）即可（然而这个页面我们只需要使用一次）：

点击按钮之后，就会下载相应的 .msi 安装包。建议下载 LTS（长期支持版）。

下载完后再运行安装包。

运行安装包

然后是用户协议：

用户协议

安装目录：

安装目录

然后是组件，默认即可：

是否自动安装必须的工具：

是否自动安装必须的工具

是时候安装了！

等待……

安装中

安装完了，但安装窗口莫名其妙跑桌面外去了，扯也扯不回来（大雾）：

3. 安装 `Hexo`

打开终端（ Windows 用户可使用 Git 自带的 Git Bash ），只需输入：

npm install -g hexo-cli

进阶安装和使用

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。
$ npm install hexo
安装以后，可以使用以下两种方式执行 Hexo：
npx hexo
将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo ：
echo `PATH="$PATH:./node_modules/.bin"` >> ~/.profile

安装后再检测一下：

hexo -v

二、建站

1. 初始化

先新建个文件夹，再进入该文件夹。我将其取名为 website 。

然后决定您的博客文件夹名。我将其取名为 blog 。

然后执行下列命令：（请自行更改文件夹名）

hexo init blog
cd blog
npm install

好了！来测试一下吧！

输入以下命令以开启服务器：

hexo serve

或

hexo s

开启服务器

然后打开浏览器，输入 http://localhost:4000/ 。当然您也可以直接点击这个链接。

然后您就可以看到您的博客长这样：

博客外观

按 Ctrl+C 即可终止。

2. 部署

2-1 部署到 `GitHub Pages`

2-1-1 新建库

首先要有个 GitHub 账户，如果没有的话就注册一个吧！

当您用账号登入后，新建一个 repository 。网上的教程都要求必须命名为 username.github.io（其中 username 指用户名），不过根据官方文档的说法，这并不是必要的：

Project page

如果您更希望您的站点部署在 <您的 GitHub 用户名>.github.io 的子目录中，您的 repository 需要直接命名为子目录的名字，这样您的站点可以通过 https://<您的 GitHub 用户名>.github.io/ 访问。您需要检查您的 Hexo 配置文件，将 url 修改为 https://<您的 GitHub 用户名>.github.io/、将 root 的值修改为 //

如此来看，其实我还是更建议命名为 username.github.io 。至于其他选项，还是保持默认吧……

2-1-2 连接 `GitHub`

输入命令绑定 GitHub 账号：

git config --global user.name "username"		# GitHub 用户名
git config --global user.email name@example.com	# 用于注册 GitHub 的邮箱

用 ssh-keygen 生成私钥和公钥：

ssh-keygen -t rsa

接着三个回车下去，不用输入其它的东西：

然后打开生成的 .pub 公钥储存文件（储存目录可在第二行看到），

复制文件内容，只用 Ctrl+A、Ctrl+C 再 Alt+F4 就成。

回到 GitHub 上，点击右上角的头像，再点击下面菜单中的 Settings：

Settings

在接下来的设置界面点击 SSH and GPG keys：

SSH and GPG keys

接着再点 New SSH key 来创建新秘钥：

New SSH key

Title 随意，将复制的内容粘贴到 Key 中，然后点击 Add SSH key ：

Add SSH key

然后测试添加 SSH 是否成功：

ssh -T git@github.com

如果输出中在 Hi 后跟着您的 GitHub 用户名，则说明添加成功：

添加成功

2-1-3 部署

首先需要安装 hexo-deployer-git 插件。在您的博客文件夹（我的叫 blog）内执行：

npm install hexo-deployer-git --save

然后打开 _config.yml ，在末尾找到 Deployment ：

然后改成这样：（不知道 SSH？就是 git clone 要用的那个！）

deploy:
  type: git
  repository: git@github.com:username/username.github.io.git	# 即网站 GitHub 库的 SSH
  branch: master

像这样：

接下来就只用运行：

hexo d -g

PS:

如果遇到 Error Deployer not found ，

请重新执行：

npm install hexo-deployer-git --save
hexo d -g

看到这样：

部署成功

就说明部署成功啦！

打开 username.github.io ，就可进入您的博客咯~

了解 Hexo 的各种命令。

2-2 部署到 `Gitee Pages`

Gitee 差不多相当于中国版的 GitHub，国内访问速度更快。如果您的博客只面向国内，那么部署到 Gitee Pages 是个不错的选择。当然您也可以同时部署到 GitHub Pages 和 Gitee Pages 上，完全没有问题。

2-2-1 新建库

首先要有个 Gitee 账户，如果没有的话就注册一个吧！

然后在首页右上角 + - 新建仓库 。

之后的界面中仓库名称为自己的个性域名，但需要设置为公开。然后点击 创建。

创建后的界面大概这样：

然后复制 Git 全局设置： 后的两行代码，并在控制台内运行。

2-2-2 连接 `Gitee`

这一部分应该和 2-1-2 差不多。

新建库的界面大概这样：

然后复制 Git 全局设置： 后的两行代码，并在控制台内运行。

然后添加 SSH key。

以下摘自官方文档：

SSH key 可以让你在你的电脑和 Git @ OSC 之间建立安全的加密连接。

你可以按如下命令来生成sshkey
ssh-keygen -t rsa -C "xxxxx@xxxxx.com"# Creates a new ssh key using the provided email
# Generating public/private rsa key pair...
查看你的public key，并把他添加到 Git @ OSC http://gitee.com/keys
cat ~/.ssh/id_rsa.pub
# ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc....
添加后，在终端（Terminal）中输入
ssh -T git@gitee.com
若返回
Welcome to 码云, yourname! 
则证明添加成功。

2-2-3 部署

首先需要安装 hexo-deployer-git 插件。在您的博客文件夹（我的叫 blog）内执行：

npm install hexo-deployer-git --save

然后打开 _config.yml ，在末尾找到 Deployment ：

然后改成这样：（不知道 SSH？就是 git clone 要用的那个！）

deploy:
  type: git
  repository: git@gitee.com:reponame/reponame.git	# 即网站 Gitee 库的 SSH
  branch: master

像这样：

接下来就只用运行：

hexo d -g

以下复制了 2-1-3 的部分内容，由于是在 Ubuntu 18.04 上部署到 GitHub Pages 上，可能有用。

PS:

如果遇到，

请重新执行：
npm install hexo-deployer-git --save
hexo d -g
看到这样：

就说明部署成功啦！

然后刷新一下仓库页面，发现变成了这样：

仓库页面

然后点击上方的 服务 - Gitee Pages：（要上传后才会出现这项服务）

然后直接点击 启动 就好了：

等待片刻后就会出现：

已开启 Gitee Pages 服务，网站地址： http://xxx.gitee.io

点开链接，就可进入您的博客咯~

了解 Hexo 的各种命令。

三、日常操作

1. 搭建

1-1 调试

当您在博客文件夹内进行操作后，可能会想观看效果。只需三步走：

hexo clean
hexo g
hexo s --debug

然后即可在 http://localhost:4000/ 上观看网站效果了。

1-2 部署

当您在博客文件夹内进行操作后，要更新网站库，只需输入

hexo d -g

2. 写作

2-1 创建文章

请查阅官方文档。

2-2 插入本地图片

2-2-1 绝对路径

您可以直接将图片放在 source/images 目录中，然后用网站的绝对路径来访问：

![Something](/images/xxx)

2-2-2 相对路径

打开博客主目录的 _config.yml ，找到 post_asset_folder ，将它的值改为 true ，即：

post_asset_folder: true

之后生成文章：

hexo n title

就会在 source/_post 生成同名文件夹 title 了。

在该同名文件夹中放入图片，用相对路径来访问：

![Something](xxx)

注意图片路径只用写上图片名即可。

四、个性化

1. 配置

默认的配置文件 _config.yml 内容如下：

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

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# 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:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''

各项内容可查阅官方文档。

posted @ 2020-03-11 18:01 Createsj 阅读(575) 评论(0) 收藏举报

刷新页面返回顶部

Createsj

详解 Hexo 免费搭建博客

〇、 Hexo 简介

什么是 Hexo？

一、环境搭建

1. 安装 Git

在 Ubuntu 上

在 Windows 上

2. 安装 Node.js 及 npm​

在 Ubuntu 上

2-1 方案一

2-2 方案二

2-2-1下载安装 Node.js

2-2-2 设置全局环境变量。

在 Windows 上

3. 安装 Hexo

进阶安装和使用

二、 建站

1. 初始化

2. 部署

2-1 部署到 GitHub Pages

2-1-1 新建库

Project page

2-1-2 连接 GitHub

2-1-3 部署

2-2 部署到 Gitee Pages

2-2-1 新建库

2-2-2 连接 Gitee

2-2-3 部署

三、日常操作

1. 搭建

1-1 调试

1-2 部署

2. 写作

2-1 创建文章

2-2 插入本地图片

2-2-1 绝对路径

2-2-2 相对路径

四、个性化

1. 配置

公告

〇、 `Hexo` 简介

1. 安装 `Git`

在 `Ubuntu` 上

在 `Windows` 上

2. 安装 `Node.js` 及 `npm`

在 `Ubuntu` 上

2-2-1下载安装 `Node.js`

在 `Windows` 上

3. 安装 `Hexo`

二、建站

2-1 部署到 `GitHub Pages`

2-1-2 连接 `GitHub`

2-2 部署到 `Gitee Pages`

2-2-2 连接 `Gitee`