005-用hexo搭建个人博客 | 2021-02-22

前言:一直以来都有着搭建一个线上博客的想法,hexo最早在笔者学习Python的书籍中看到,但可能由于那本书年限有些久远,加上当时需要完成一个项目,所以后面就不了了之了,现如今,hexo成为我的第一选择,笔者跟着CodeSheep的B站视频【手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo】完成。

0 开始之前

1 开始

1.1 配置并生成hexo环境

在桌面新建一个文件夹命名为Blog,进入Blog,点击鼠标右键,选择Git Bash Here

image-20210221173538983

此时会出现一个终端,输入命令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 -vhexo 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打开此文件,如下图

image-20210222200709749

编辑一些内容,可先写好你好,这是我的第一篇博客!,然后按下Ctrl+3或是在内容前后加入h3标签如<h3>你好,这是我的第一篇博客!</h3>也可实现此效果,具体的markdown语法可以在网上搜索。

image-20210222201053565

保存完成后,终端输入命令hexo clean,再输入hexo ghexo 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即可看到刚刚创建的文章。

image-20210222201804830

1.3 让其他人也能访问你的博客

上面完成的博客还是在本地,别人无法访问,所以我们需要将此博客部署到云端(白嫖github)。首先登陆github,没有账号的请注册一个,怎么注册网上有教程,这里不再赘述。

注册登录完成后,点击右上角的New repository

image-20210222202854051

仓库名填"你的github昵称.github.io",例如笔者用户名为"yzh-7",则填入"yzh-7.github.io",然后拉到页面底部,点击Create repository即可。

image-20210222203142521

成功后出现以下页面,重点记住图片中红色框框的网址,下文中修改_config.yml需要用到。

image-20210222204841580

在终端输入命令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文件,右键选择用记事本打开。

image-20210222203944859

滑动到文件最下方,找到#Deployment,修改为如下内容,保存。

注意:repo这一栏填的是上面你创建仓库成功后的那个网址如https://github.com/yzh-7/yzh-7.github.io.git

image-20210222204251944

在终端输入命令hexo d即可。如果出现错误,则依次执行hexo cleanhexo ghexo 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

image-20210222205952243

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,保存。

image-20210222212747770

在终端输入hexo s,在浏览器访问http://localhost:4000即可。若想在云端也有这个效果,则hexo d即可(如果出现报错,则依次执行hexo clean cleanhexo ghexo d)。

image-20210222213023913

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 后续

暂无。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容