Hexo+GitHub搭建博客平台

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

  1. 首先要新建一个仓库,名称为GitHub账号名称加github.io结尾,如我自己的:fugary.github.io

Hexo+GitHub搭建博客平台

  1. 安装发布git的插件
    npm install hexo-deployer-git --save
    
  2. 然后配置_config.yml,添加deploy配置:
deploy:
  type: git
  repo: https://github.com/fugary/fugary.github.io.git
  branch: master
  1. 调用发布命令

    hexo g
    hexo d
    
如果没有配置免密码登录,需要输入用户名和密码

   ```bash
   Username for 'https://github.com': xxxx
   Password for 'https://xxxx@github.com':

绑定个人域名

要配置个人域名,主要有两个部分要配置,一部分是配置域名解析,已不是是源文件中需要配置一个CNAME文件

配置域名解析

要绑定个人域名,需要先申请一个域名,我目前使用的是阿里云的域名:

注意:域名状态如果是未实名认证,配置后也是不能正常访问的。必须先实名认证

Hexo+GitHub搭建博客平台

配置解析CNAME:

理论上也是可以配置A记录的,配置IP地址,但是我们的github网站的IP地址并不固定,多次ping的时候会得到多个IP地址,因此还是先用CNAME方式配置。

Hexo+GitHub搭建博客平台

然后要等待10分钟左右才能生效。

给Hexo添加CNAME

需要在我们的工程目录下的source文件夹中新建一个名为CNAME的文件(无扩展名),然后把自己的域名填进去。

然后重新生成并发布:

hexo clean
hexo g
hexo d

访问测试

等待域名解析生效之后就可以测试访问了。

给TA打赏
共{{data.count}}人
人已打赏
运维

FLAC无损音乐如何快速转换成iPhone能播放无损音乐

2024-11-19 10:36:06

运维

企业微信单点登录开发

2024-11-19 10:36:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索