再次重建博客(建立一个Hexo博客)
<关于我博客又丢档案了这件事>
时隔 多年 几个月 我突然发现好像有个博客已经吃灰很久了,开始想更新下内容,结果发现又又又 丢人 丢档了(Hexo博客的源文件丢了)
这篇文章就讲下重建博客的时候干的一些事情吧.
同时也是一个教萌新搭建博客的教程
1. 装Hexo
首先Node Js 肯定是必须的
下载其中任意一个版本安装,装好后在命令行中敲
npm version
会看到 NodeJs的版本 如:
{ 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安装完后
接下来可以开始安装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了
初始化结束后会看到目录结构如下
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
会见到类似
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(根目录下的,不是主题那个),在配置中添加
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex
然后修改permalink如
permalink: p/:abbrlink/
运行
hexo server
可以看到文章的链接变成了
B. 为网站添加RSS订阅
虽然9012了,但是还是有许多人喜欢RSS的方式阅读信息,加上最近也多了一些好用的RSS阅读器
所以决定还是弄上RSS,反正也很简单
首先到博客的根目录运行
npm install hexo-generator-feed –save
安装完成后我们开始修改根目录下的配置文件_config.yml加入
feed:
type: atom
path: atom.xml
limit: 20
接下来到主题目录下的_config.yml 将rss设置如
rss: /atom.xml
运行本地服务
hexo s
打开
可以看到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选项如
deploy:
type: git
repo: https://github.com/LovelyWei/LovelyWei.github.io.git
branch: master
repo处的值修改为你的推送地址
接下来尝试
hexo g
hexo d
中间可能需要你输入你的Github账号和密码,上传完成后就能看到仓库里已经有静态文件了
访问github.io网址就能看到blog了
5. 博客绑定域名
挂着xxx.github.io 似乎不是那么的好看,我自己又去买了一个域名,用自己的域名访问会更加个性一点?
在购买域名的服务商上设置到ID.github.io的别名,如
CNAME @ LovelyWei.github.io
设置好后在 source 文件夹中新建CNAME文件,里面写上你设置的域名如
hex.moe
若你设置的别名是带了www之类的,如
CNAME www LovelyWei.github.io
CNAME文件中的内容就要修改为
www.hex.moe
重新发布
hexo cl
hexo g
hexo d
等待数分钟后访问网址(如 http://hex.moe ),就能看到博客了
完
This blog is under a CC BY-NC-SA 3.0 Unported License
Link to this article: https://hex.moe/p/9b3fb8b9/