前言:一直以来都有着搭建一个线上博客的想法,hexo最早在笔者学习Python的书籍中看到,但可能由于那本书年限有些久远,加上当时需要完成一个项目,所以后面就不了了之了,现如今,hexo成为我的第一选择,笔者跟着CodeSheep的B站视频【手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo】完成。
0 开始之前
1 开始
1.1 配置并生成hexo环境
在桌面新建一个文件夹命名为Blog,进入Blog,点击鼠标右键,选择Git Bash Here
此时会出现一个终端,输入命令npm install -g hexo-cli
,终端内容如下
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ npm install -g hexo-cli
C:\Users\15283\AppData\Roaming\npm\hexo -> C:\Users\15283\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-cli@4.2.0
added 65 packages from 339 contributors in 3.396s
再输入命令hexo -v
和hexo init
,(hexo -v
用于查看hexo-cli模块是否安装成功,hexo init
是对当前文件夹进行初始化即生成博客环境)
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ hexo -v
hexo-cli: 4.2.0
os: Windows_NT 10.0.18363 win32 x64
node: 14.15.4
v8: 8.4.371.19-node.17
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 83
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1i
cldr: 37.0
icu: 67.1
tz: 2020a
unicode: 13.0
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 190 packages from 445 contributors in 5.284s
15 packages are looking for funding
run `npm fund` for details
INFO Start blogging with Hexo!
再输入命令hexo s
启动博客,打开浏览器,在搜索框输入http://localhost:4000即可看见效果。
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
注意:除了页面上展示的常用指令,更多指令见hexo指令。
1.2 开始你的第一篇博客
在终端输入命令hexo new "My first Blog"
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ hexo new "My first Blog"
INFO Validating config
INFO Created: ~\Desktop\Blog\source\_posts\My-first-Blog.md
根据路径Desktop\Blog\source\_posts\My-first-Blog.md
找到该文件,有两种常用方法编辑此文件,第一种通过终端切换到该文件的目录,使用vim进行编辑,另一种则是用专门编辑markdown文件的软件。(网上有很多,笔者推荐Typora,并且markdown非常简单易学,写过几遍基本用法就会了,如果会HTML则理解的更快)
用Typora打开此文件,如下图
编辑一些内容,可先写好你好,这是我的第一篇博客!
,然后按下Ctrl
+3
或是在内容前后加入h3标签如<h3>你好,这是我的第一篇博客!</h3>
也可实现此效果,具体的markdown语法可以在网上搜索。
保存完成后,终端输入命令hexo clean
,再输入hexo g
和hexo s
。
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog/source/_posts
$ hexo clean
INFO Validating config
INFO Deleted database.
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog/source/_posts
$ hexo g
INFO Validating config
INFO Start processing
INFO Files loaded in 172 ms
(node:6552) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6552) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:6552) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:6552) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:6552) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:6552) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
INFO Generated: archives/2021/index.html
INFO Generated: archives/2021/02/index.html
INFO Generated: archives/index.html
INFO Generated: index.html
INFO Generated: tags/First、Blog/index.html
INFO Generated: js/script.js
INFO Generated: fancybox/jquery.fancybox.min.css
INFO Generated: 2021/02/21/hello-world/index.html
INFO Generated: css/style.css
INFO Generated: 2021/02/22/My-first-Blog/index.html
INFO Generated: css/fonts/fontawesome-webfont.woff2
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: fancybox/jquery.fancybox.min.js
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: js/jquery-3.4.1.min.js
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO 19 files generated in 626 ms
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog/source/_posts
$ hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
在浏览器打开http://localhost:4000
即可看到刚刚创建的文章。
1.3 让其他人也能访问你的博客
上面完成的博客还是在本地,别人无法访问,所以我们需要将此博客部署到云端(白嫖github)。首先登陆github,没有账号的请注册一个,怎么注册网上有教程,这里不再赘述。
注册登录完成后,点击右上角的New repository
。
仓库名填"你的github昵称.github.io",例如笔者用户名为"yzh-7",则填入"yzh-7.github.io",然后拉到页面底部,点击Create repository
即可。
成功后出现以下页面,重点记住图片中红色框框的网址,下文中修改_config.yml
需要用到。
在终端输入命令npm install hexo-deployer-git --save
。
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog/source/_posts
$ npm install hexo-deployer-git --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-deployer-git@3.0.0
added 6 packages from 2 contributors in 1.345s
15 packages are looking for funding
run `npm fund` for details
回到Blog文件夹,找到_config.yml
文件,右键选择用记事本打开。
滑动到文件最下方,找到#Deployment
,修改为如下内容,保存。
注意:repo这一栏填的是上面你创建仓库成功后的那个网址如https://github.com/yzh-7/yzh-7.github.io.git
在终端输入命令hexo d
即可。如果出现错误,则依次执行hexo clean
、hexo g
、hexo d
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ hexo d
INFO Validating config
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2021/02/21/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in 2021/02/22/My-first-Blog/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/02/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/jquery-3.4.1.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tags/First、Blog/index.html.
The file will have its original line endings in your working directory
[master 0fd9504] Site updated: 2021-02-22 20:54:57
3 files changed, 4 insertions(+), 4 deletions(-)
Enumerating objects: 62, done.
Counting objects: 100% (62/62), done.
Delta compression using up to 4 threads
Compressing objects: 100% (41/41), done.
Writing objects: 100% (62/62), 884.13 KiB | 8.75 MiB/s, done.
Total 62 (delta 14), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (14/14), done.
To https://github.com/yzh-7/yzh-7.github.io.git
* [new branch] HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/yzh-7/yzh-7.github.io.git'.
INFO Deploy done: git
此时,你就可以在浏览器输入https://你的github昵称.github.io
,例如笔者的https://yzh-7.github.io
。
1.4 更换主题
hexo默认主题比较简陋,如果想要更漂亮的主题,请访问hexo主题,推荐matery、next。
下面演示一个比较简单的更换主题
终端输入命令git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
15283@DESKTOP-ODRDGG3 MINGW64 ~/Desktop/Blog
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
Cloning into 'themes/yilia'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 2037 (delta 0), reused 0 (delta 0), pack-reused 2036
Receiving objects: 100% (2037/2037), 10.53 MiB | 72.00 KiB/s, done.
Resolving deltas: 100% (1079/1079), done.
回到Blog文件夹,找到_config.yml
文件,右键选择用记事本打开。找到#Extensions
下的theme
,将主题换成yilia
,保存。
在终端输入hexo s
,在浏览器访问http://localhost:4000
即可。若想在云端也有这个效果,则hexo d
即可(如果出现报错,则依次执行hexo clean clean
、hexo g
、hexo d
)。
2 期间出现的问题
Q1:npm下载十分缓慢,怎么解决?
A1:由于npm服务器在外国,所以访问比较缓慢,可以使用国内的镜像源下载。操作为在终端输入命令npm install -g cnpm --registry=http://registry.npm.taobao.org
,后续下载其他node第三方包,将命令npm install xxx
换成cnpm install xxx
即可加快下载速度。
3 不足之处
N1:还有个问题关于git软件的,但是复现麻烦,所以就搁置了。具体就是git软件第一次安装,你执行hexo d
推送到github上时,需要输入你的github账号密码,根据终端给你的提示按照格式输入即可。
N2:该博客并没有后台(或许是笔者并没有发现),无法对发表的文章进行统一管理。
4 后续
暂无。。。