Hexo需要使用Git和Nodejs,因此需要提前安装好Git和Nodejs
详细文档(这网站不是很稳定):https://hexo.io/zh-cn/docs/index.html
Hexo博客平台原理
Hexo使用Markdown解析器把Markdown文件配合主题生成静态网页,并且支持发布到GitHub Pages,方便个人生成博客网站。本质上生成了静态的html之后可以发布到任何web服务器平台。
但是只是一个静态的网站,没有自己的数据库,不支持后台管理等动态管理功能。
另外要支持评论的话需要使用第三方的数据库,可用Valine工具,数据存储到LeanCloud,或者gitalk。
安装Hexo
根据自己的平台选择最新版的安装:
Nodejs安装:http://nodejs.cn/download/
Git安装:https://git-scm.com/downloads
如果访问失败可以试试淘宝的镜像:https://npm.taobao.org/mirrors/git-for-windows/
安装完基本的工具之后,先看看环境:
$ npm -v
6.14.3
$ git --version
git version 2.26.0.windows.1
使用 npm 安装 Hexo,全局安装hexo-cli,方便使用,可以使用国内的registry加速。
参考地址:https://cnpmjs.org/
可以手动添加--registry或者设置registry
npm config set registry https://r.cnpmjs.org
$ npm install -g hexo-cli --registry=https://r.cnpmjs.org
C:Usersgary.fuAppDataRoamingnpmhexo -> C:Usersgary.fuAppDataRoamingnpmnode_moduleshexo-clibinhexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_moduleshexo-clinode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-cli@3.1.0
added 81 packages from 322 contributors in 25.679s
安装后测试显示hexo -v
:
hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
os: Windows_NT 6.1.7601 win32 x64
node: 12.10.0
v8: 7.6.303.29-node.16
uv: 1.31.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 4
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1c
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1
新建博客平台
初始化hexo项目命令如下hexo init xxxx
:
$ hexo init MengStudyBlog
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'C:MyCodesCustomCodeMengStudyBlog'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 161 (delta 12), reused 12 (delta 4), pack-reused 131
Receiving objects: 100% (161/161), 31.79 KiB | 75.00 KiB/s, done.
Resolving deltas: 100% (74/74), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'C:/MyCodes/CustomCode/MengStudyBlog/themes/landscape'...
remote: Enumerating objects: 1063, done.
remote: Total 1063 (delta 0), reused 0 (delta 0), pack-reused 1063
Receiving objects: 100% (1063/1063), 3.21 MiB | 232.00 KiB/s, done.
Resolving deltas: 100% (585/585), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO Install dependencies
> ejs@2.7.4 postinstall C:MyCodesCustomCodeMengStudyBlognode_modulesejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_moduleschokidarnode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 253 packages from 450 contributors and audited 470 packages in 49.115s
5 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
INFO Start blogging with Hexo!
进入该目录,安装本地依赖:
cd MengStudyBlog
npm install
其实这个时候默认网站已经成型了,可以运行看看效果,后面再改配置,实现自己自定义的网站。
hexo server
打开浏览器访问:http://localhost:4000/
配置博客平台
参考地址: https://hexo.io/zh-cn/docs/configuration
配置基本信息
配置文件_config.yml
,配置好自己的博客名称等:
title: 梦学园博客
subtitle: 'Gary的个人博客网站'
description: '技术博客,关注软件开发、微服务、分布式'
keywords:
author: Gary Fu
language: cn
timezone: 'Asia/Shanghai'
配置主题
主题配置文档:https://hexo.io/zh-cn/docs/themes
主题选择:https://hexo.io/themes,里面有很多主题,选择自己喜欢的主题之后下载源文件即可。
主题是在生成的文件夹下面有个themes
目录,下面已经有一个默认主题了,名叫landscape
,在_config.yml
中配置有默认的主题名字。
theme: landscape
下载主题,我选择pure
主题试用https://github.com/cofess/hexo-theme-pure:
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure
为了使用完整功能,需要安装一些插件(文档中有说明)。
npm install hexo-wordcount --save
npm install hexo-generator-json-content --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
发布到GitHub
- 首先要新建一个仓库,名称为GitHub账号名称加github.io结尾,如我自己的:fugary.github.io
- 安装发布git的插件
npm install hexo-deployer-git --save
- 然后配置
_config.yml
,添加deploy配置:
deploy:
type: git
repo: https://github.com/fugary/fugary.github.io.git
branch: master
-
调用发布命令
hexo g hexo d
如果没有配置免密码登录,需要输入用户名和密码
```bash
Username for 'https://github.com': xxxx
Password for 'https://xxxx@github.com':
绑定个人域名
要配置个人域名,主要有两个部分要配置,一部分是配置域名解析,已不是是源文件中需要配置一个CNAME文件
配置域名解析
要绑定个人域名,需要先申请一个域名,我目前使用的是阿里云的域名:
注意:域名状态如果是未实名认证,配置后也是不能正常访问的。必须先实名认证
配置解析CNAME:
理论上也是可以配置A记录的,配置IP地址,但是我们的github网站的IP地址并不固定,多次ping的时候会得到多个IP地址,因此还是先用CNAME方式配置。
然后要等待10分钟左右才能生效。
给Hexo添加CNAME
需要在我们的工程目录下的source文件夹中新建一个名为CNAME的文件(无扩展名),然后把自己的域名填进去。
然后重新生成并发布:
hexo clean
hexo g
hexo d
访问测试
等待域名解析生效之后就可以测试访问了。