Hexo博客搭建记录


Hexo博客搭建记录

参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程

以下命令操作建议使用管理员权限完成

1. nodejs & hexo 安装

1.首先下载node.js,并安装(安装node时,会自动安装npm),安装完毕后在控制台输入node -v,如果显示版本则说明安装成功。

D:\>node -v
v16.18.1

D:\>npm -v
8.19.2

2.安装cnpm,命令为npm install -g cnpm --registry=https://registry.npm.taobao.org

(因为这里我已经下过了,所以显示可能不准确)

D:\>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 4 packages, removed 6 packages, and changed 415 packages in 1m

11 packages are looking for funding
  run `npm fund` for details

输入cnpm -v,如果出现下面的字样说明安装cnpm成功

D:\>cnpm -v
cnpm@9.0.1 (D:\apps\nodejs16.18.1\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@8.19.3 (D:\apps\nodejs16.18.1\node_global\node_modules\cnpm\node_modules\npm\index.js)
node@16.18.1 (D:\apps\nodejs16.18.1\node.exe)
npminstall@7.3.1 (D:\apps\nodejs16.18.1\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\apps\nodejs16.18.1\node_global
win32 x64 10.0.19044
registry=https://registry.npmmirror.com

3.使用cnpm安装hexo,命令cnpm install -g hexo-cli,安装完毕后使用命令hexo -v,如果出现以下字样说明安装hexo成功。

D:\>hexo -v
hexo-cli: 4.3.0
os: win32 10.0.19044
node: 16.18.1
v8: 9.4.146.26-node.22
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.10
openssl: 1.1.1q+quic
cldr: 41.0
icu: 71.1
tz: 2022b
unicode: 14.0
ngtcp2: 0.8.1
nghttp3: 0.7.0

2.使用hexo搭建博客

1.首先使用命令hexo init :创建你的站点目录,并使用hexo初始化该文件夹

如果在搭建博客的过程中有问题,只要把文件夹删掉重来即可

D:\>hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

初始化成功后,站点目录下生成的文件:

image-20230112003332202

2.使用命令hexo s,启动博客(注意要之前的目录下运行),博客在本地的4000端口启动,访问http://localhost:4000/ 即可以看到

D:\blog>hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
image-20230112004204737

3.使用命令hexo n "文章名",创建博客文章。

D:\blog>hexo n "我的第一篇博客文章"
INFO  Validating config
INFO  Created: D:\blog\source\_posts\我的第一篇博客文章.md

进入对应的目录下,可以看到已经成功生成md文件,然后就可以在该文件中写博客了

D:\blog>cd D:\blog\source\_posts\
D:\blog\source\_posts>dir
 驱动器 D 中的卷是 Data
 卷的序列号是 8A15-B825

 D:\blog\source\_posts 的目录

2023/01/12  00:48              .
2023/01/12  00:48              ..
2023/01/12  00:08               876 hello-world.md
2023/01/12  00:48                75 我的第一篇博客文章.md
               2 个文件            951 字节
               2 个目录 1,724,429,172,736 可用字节

4.返回博客目录,使用命令hexo clean清理一下缓存文件,使用命令hexo g在hexo站点根目录下生成public文件夹

D:\blog\source\_posts>cd ../..

D:\blog>hexo clean
INFO  Validating config
INFO  Deleted database.

D:\blog>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 157 ms
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: tags/杂记/index.html
INFO  Generated: archives/2023/01/index.html
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: archives/2023/index.html
INFO  Generated: js/script.js
INFO  Generated: css/style.css
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.woff2
INFO  Generated: 2023/01/12/hello-world/index.html
INFO  Generated: 2023/01/12/我的第一篇博客文章/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  19 files generated in 360 ms

D:\blog>

5.然后hexo s重新启动服务,浏览器访问端口,成功生成新的文章。

image-20230112010050731

3.将博客部署到github

1.登录github,创建新仓库,仓库名必须如下:

image-20230112010910756

其他选项默认,然后点击创建仓库。

2.当前站点目录下,使用命令npm install hexo-deployer-git --save,安装git。

注意设置用户名和邮件:(随意)

git config --global user.name <你的用户名>
git config --global user.email <你的邮箱>

3.在hexo博客目录下的 _config.yml 文件,最后几行改为如下形式,然后保存。

注意:每个冒号后面要加空格

image-20230112012113713

4.使用命令hexo d,将博客部署到github中

D:\blog>hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in D:/blog/.deploy_git/.git/
...
...
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 8 threads
Compressing objects: 100% (29/29), done.
Writing objects: 100% (39/39), 886.59 KiB | 1.82 MiB/s, done.
Total 39 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), done.
To github.com:liyuelian/liyuelian.github.io.git
 * [new branch]      HEAD -> master
branch 'master' set up to track 'git@github.com:liyuelian/liyuelian.github.io.git/master'.
INFO  Deploy done: git

这里没有设置ssh免密登录的要输入github账号密码

5.在github仓库刷新,可以看到所有hexo文件已经上传到仓库中。

image-20230112013058368

6.在地址栏中访问<你的github用户名>.github.io,即可看到个人博客网站。

image-20230112013505644

4.如何发布新文章

参考:Hexo博客教程(二)| 如何写作新文章并发布

1.首先使用命令hexo new </code>创建新文章,然后到hexo目录/source/_posts下去编写文章。</p> <p>使用该命令创建的md文件头会有一个前置信息Front-matter,用于给hexo渲染md文档。</p> <table> <thead> <tr> <th style="text-align: left">配置项</th> <th style="text-align: left">意义</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">title</td> <td style="text-align: left">文章标题</td> </tr> <tr> <td style="text-align: left">date</td> <td style="text-align: left">文章创建日期</td> </tr> <tr> <td style="text-align: left">comments</td> <td style="text-align: left">是否启动文章评论功能</td> </tr> <tr> <td style="text-align: left">tags</td> <td style="text-align: left">文章标签</td> </tr> <tr> <td style="text-align: left">categories</td> <td style="text-align: left">文章分类</td> </tr> <tr> <td style="text-align: left">keywords</td> <td style="text-align: left">文章关键字</td> </tr> </tbody> </table> <p>2.使用命令<code>hexo clean</code>,清除掉旧的数据</p> <blockquote> <p>这个命令会清除掉之前生成的网页,即站点根目录下的<code>public</code>文件夹。</p> </blockquote> <p>3.使用命令<code>hexo g</code></p> <blockquote> <p>这个命令会将<code>source</code>文件夹下所有的md文件进行渲染,生成HTML页面,存放在<code>public</code>文件夹下。</p> </blockquote> <p>特别提醒! 每次修改文章后,都要执行这两条命令,清除掉旧的数据,然后重新生成页面。</p> <p>4.使用命令<code>hexo d</code>,将文件上传到你的远程仓库中即可。</p> <blockquote> <p>可以先使用hexo s,先在本地预览一下</p> </blockquote> <h2 id="5如何更换博客主题">5.如何更换博客主题</h2> <blockquote> <p>以yilia主题为例:litten/hexo-theme-yilia: A simple and elegant theme for hexo. (github.com)</p> </blockquote> <p>1.在你的hexo目录下运行:<code>git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia</code></p> <pre><code class="language-bash">D:\blog>git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia Cloning into 'themes/yilia'... remote: Enumerating objects: 2037, 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 | 398.00 KiB/s, done. Resolving deltas: 100% (1079/1079), done. </code></pre> <img src="https://img.yipin100.com/p.php?img=https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230112020544576.png" alt="image-20230112020544576" style="zoom: 67%"> <p>2.在_config.yml文件中修改主题,保存。</p> <blockquote> <p>注意冒号后面有空格</p> </blockquote> <img src="https://img.yipin100.com/p.php?img=https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230112020815301.png" alt="image-20230112020815301" style="zoom: 67%"> <img src="https://img.yipin100.com/p.php?img=https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230112020902973.png" alt="image-20230112020902973" style="zoom: 67%"> <p>3.在hexo目录下使用<code>hexo clean</code>,然后使用<code>hexo g</code>重新生成public文件</p> <pre><code class="language-bash">D:\blog>hexo clean INFO Validating config INFO Deleted database. INFO Deleted public folder. D:\blog>hexo g INFO Validating config INFO Start processing INFO Files loaded in 285 ms ... INFO 20 files generated in 64 ms </code></pre> <p>4.使用<code>hexo s</code>在本地启动,预览一下</p> <img src="https://img.yipin100.com/p.php?img=https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230112021746933.png" alt="image-20230112021746933" style="zoom: 67%"> <p>5.觉得没问题了,就在hexo目录下使用<code>hexo d</code>,将新的博客文件发布到你的远程仓库中。</p> <pre><code class="language-bash">D:\blog>hexo d INFO Validating config INFO Deploying: git ... INFO Deploy done: git </code></pre> <p>然后在你的<github个人用户名>.github.io上就可以看到新的博客主题了</p> <blockquote> <p>有时候会延迟一会才能更新</p> </blockquote> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid117-0.html' class='tagbtn' target='_blank'>日常</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563430.html">Npm日常操作</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563212.html">Sql Server日常操作</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-547772.html">日常Java 2021/11/17</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-546068.html">日常训练</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-527444.html">[日常训练]冬眠营</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-511607.html">[日常训练]冬眠营</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-501873.html">批处理-日常小功能用法记录</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-487308.html">我与阿里云的日常-QuickBI开发教程</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-476452.html">记录ABAP开发的日常——cl_salv_table的使用案例</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-474532.html">英语-日常交流</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-461648.html">【日常修机】打印机故障维护</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-457870.html">[日常坑]前端j's数据导出excel,导出的文件损坏</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>