再次重建博客(建立一个Hexo博客)

<关于我博客又丢档案了这件事>

时隔 多年 几个月 我突然发现好像有个博客已经吃灰很久了,开始想更新下内容,结果发现又又又 丢人 丢档了(Hexo博客的源文件丢了)

这篇文章就讲下重建博客的时候干的一些事情吧.

同时也是一个教萌新搭建博客的教程

1. 装Hexo

首先Node Js 肯定是必须的

NodeJs官网

下载其中任意一个版本安装,装好后在命令行中敲

npm version

会看到 NodeJs的版本 如:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{ npm: '6.5.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '34.0',
  http_parser: '2.8.0',
  icu: '63.1',
  llhttp: '1.0.1',
  modules: '67',
  napi: '4',
  nghttp2: '1.34.0',
  node: '11.8.0',
  openssl: '1.1.0j',
  tz: '2018e',
  unicode: '11.0',
  uv: '1.25.0',
  v8: '7.0.276.38-node.16',
  zlib: '1.2.11' }

接下来安装

Git

关于Git就不再多做介绍了,安装的方法可以在网上搜索到

Git安装完后

接下来可以开始安装Hexo了.

不过 在这之前,由于国内网络的种种原因,先在安装之前调整一些配置

调整npm的源为淘宝镜像

npm config set registry http://registry.npm.taobao.org/

为Git设置代理(可选,如果你不知道这里在设置什么就不用设置了)

git config –global http.proxy ‘socks5://127.0.0.1:1080’ git config –global https.proxy ‘socks5://127.0.0.1:1080’

接下来就可以正式开始安装Hexo了

先下载Hexo程序

npm install hexo-cli -g

接下来,打开命令行到你想安装博客的目录,运行

hexo init

就开始自动化的初始化Hexo了

初始化结束后会看到目录结构如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2019/8/21     13:53                node_modules
d-----        2019/8/21      1:25                scaffolds
d-----        2019/8/21     14:23                source
d-----        2019/8/21     13:16                themes
-a----        2019/8/21      1:25             71 .gitignore
-a----        2019/8/21     15:02          64543 db.json
-a----        2019/8/21     13:53         135764 package-lock.json
-a----        2019/8/21     13:53            629 package.json
-a----        2019/8/21     14:17           1962 _config.yml

接下来运行

hexo server

会见到类似

1
2

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

此时打开 https://localhost:4000 就能看到一个新的博客了 (因每个人的环境不同所以地址可能有出入,以命令行显示的为准 )

打开网址见到Hello World 安装Hexo就结束了

2. 安装 Material 主题

安装好博客后可以自行安装主题来美化博客,我选了Material 感觉这个主题的简约风格挺好看的

可以选择自己喜欢的主题 大体安装方式都类似

打开 https://github.com/viosey/hexo-theme-material

点击 Release 下载 1.5.2 的版本

新版本的我安装了报错,不知道为什么 2019-9-21

下载完成后打开压缩包将其中的文件夹解压至 /themes

将解压的文件夹名称修改为 material

进入 material文件夹 将 _config.template.yml 文件重命名为 _config.yml

回到博客根目录 打开博客根目录的配置文件 _config.yml 将其中 theme 值修改为 theme: material

重新运行 hexo s 可以看到主题已经安装成功了

3. 安装插件

虽然Hexo已经集成了许多东西,但是我觉得还是缺了点什么,例如文章的URL不是很好之类,我选择安装了

A. URL永久化

Hexo安装完成发表文章的时URL看起来不美观,特别是标题是中文时,URL直接就写上了中文URL,不利于SEO,所以得想优化下URL.

后面选择了 hexo-abbrlink 这个插件,这个插件可以在你让你的文章获得唯一的 ID.

在接下来的设置中就可以将URL设置为例如 http://example.com/p/:UID/

操作方式如下:

安装 hexo-abbrlink,在网页根目录下插入

npm install hexo-abbrlink –save

接下调整博客的配置_config.yml(根目录下的,不是主题那个),在配置中添加

1
2
3

abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

然后修改permalink如

1

permalink: p/:abbrlink/

运行

hexo server

可以看到文章的链接变成了

http://localhost:4000/p/9b3fb8b9/

B. 为网站添加RSS订阅

虽然9012了,但是还是有许多人喜欢RSS的方式阅读信息,加上最近也多了一些好用的RSS阅读器

所以决定还是弄上RSS,反正也很简单

首先到博客的根目录运行

npm install hexo-generator-feed –save

安装完成后我们开始修改根目录下的配置文件_config.yml加入

1
2
3
4

feed:
  type: atom
  path: atom.xml
  limit: 20

接下来到主题目录下的_config.yml 将rss设置如

1

rss: /atom.xml

运行本地服务

hexo s

打开

http://localhost:4000/atom.xml

可以看到RSS xml已经有了.

C. 给网站添加sitemap.xml

虽然这个网站现在没有什么干活,但是SEO还是要做一下的.

其实添加sitemap也很简单

npm install hexo-generator-sitemap npm install hexo-generator-sitemap –save-dev npm install hexo-generator-baidu-sitemap –save-dev

然后就可以放着不管了,当然你也可以想搜索引擎主动的提交你的sitemap.

4. 发布到 github.io

按照传统的方式建立一个网站是要有一个服务器的,但是github有一个服务可以直接挂上你的静态网站,这就是github.io 这也是我选择hexo的原因 能白嫖

首先需要建立一个github账号 这点不详细阐述了

创建好github账号后开始新建一个仓库(repository)

仓库的名字命名为你的 ID.github.io

以我为例 我的github地址 https://github.com/LovelyWei 创建仓库的时候就创建为 LovelyWei.github.io

接下来不用调整什么 直接确定就能建立好一个仓库了

建立好仓库后开始配置Hexo 让Hexo能推送到Github仓库

先安装hexo-deployer-git

npm install hexo-deployer-git –save

安装好后打开根目录的配置文件 _config.yml

配置deploy选项如

1
2
3
4

deploy:
  type: git
  repo: https://github.com/LovelyWei/LovelyWei.github.io.git
  branch: master

repo处的值修改为你的推送地址

接下来尝试

hexo g hexo d

中间可能需要你输入你的Github账号和密码,上传完成后就能看到仓库里已经有静态文件了

访问github.io网址就能看到blog了

https://lovelywei.github.io/

5. 博客绑定域名

挂着xxx.github.io 似乎不是那么的好看,我自己又去买了一个域名,用自己的域名访问会更加个性一点?

在购买域名的服务商上设置到ID.github.io的别名,如

1

CNAME @ LovelyWei.github.io

设置好后在 source 文件夹中新建CNAME文件,里面写上你设置的域名如

1

hex.moe

若你设置的别名是带了www之类的,如

1

CNAME www LovelyWei.github.io

CNAME文件中的内容就要修改为

1

www.hex.moe

重新发布

hexo cl hexo g hexo d

等待数分钟后访问网址(如 http://hex.moe ),就能看到博客了

完

Tech Hexo
Licensed under CC BY-NC-SA 4.0
© 2019 - 2025 Chocolate's 废纸篓
Built with Hugo
Theme Stack designed by Jimmy