【个人博客搭建】Hexo + Github + Netlify 静态个人博客搭建（无需购买服务器）

Twilight6

Hexo 个人静态博客搭建教程

                                      ——无需购买服务器

                               
登录/注册后可看大图

                               
登录/注册后可看大图

0. 前言

---

    搭建过程中遇到的问题可以在评论区留言，或者到博客留言板中向楼主留言嗷~

    楼主博客地址（第一次访问可能较慢，请耐心等待嗷）：UangSC's Blog (uangsc.netlify.app)

    另外欢迎各位搭建成功或已经有博客的小伙伴互相添加友链~（虽然还没购买域名，但是也不碍事~）

    帖子中包含截图数140+，文字描述8000+，共花费数十小时（过程中许多配置自己都忘记了，重温一遍...)

    教程中精细到搭建过程的每一步，希望感兴趣的鱼友能无成本的搭建一个属于自己的博客，搭建后的这个博

    客就是你的专属的“笔记本”或“日记本”，用来存放学习笔记、记录日常的趣事与分享学习的心得等！

          

    1. 本贴花费了楼主大量的精力，所以不希望有太多水贴的评论，就不设置鱼币回复奖励了

    2. 楼主也是五月月初才进行了学习和搭建，所以教程中可能有些不足，希望各位鱼友见谅

    3. 鱼友们可以直接去官网： Hexo 官方文档 和 Butterfly 主题官方文档 进行更加详细配置

    4. Hexo 主要是将 markdown 解析为 html 文件，所以需要了解些 markdown 的语法规则

    温馨提醒：博客搭建需要有耐心哦，本贴所有内容都没有设置回复可见，所以楼主希望看到

              的评论是鱼友们搭建好的博客网址又或者是博客搭建过程中遇到的疑问与问题，

              不需要大家的评分，能看到鱼友成功分享搭建后的博客，就是对我最大的支持！

Ⅰ. 准备工作

---

    1. 感慨与自省

           教程文章的开始，想说些什么，但又不知该说些什么。思来想去，还是想和大家杂谈一些无关内容，

       想快速学习搭建的直接滑动页面，从【2. 准备工作】开始进行阅读，感谢各位鱼友的理解与支持！另外希

       望真正想搭建博客的小伙伴，确保充足的时间，一次性搭建成功！碎片化时间不适合尝试搭建，会使得搭

       建效率大大下降哦。

       >>> 只要不是天马行空，别只想，勇于直接做！

           楼主在很早以前就想搭建一个属于自己的个人博客，但是始终只停留在想像层面，直到如今才肯付出实践。在这段尝试着学

        习与搭建博客的过程中，学到了很多，也反思了很多。因为在搭建博客过程中，看了许多原创的配置、美化教程，都是与楼主差

        不多同龄的博主们分享的。看着他们搭建了两三年的博客中丰富的内容，对比自己在大学生涯中的荒废度过而感到羞愧与自责。

        倘若......唉，算了。可惜世上没有后悔药，我们只能把握当下所以论坛中的鱼友们，别太过贪玩，有合适的想法就去实现，切勿

        “明日复明日”,这是半个过来人小小的忠告。

    2. 准备工作

       2.1 安装 Node.js 与 Git

           因为 Hexo 是基于 Node.js 来实现的静态博客框架。它依赖于 Node.js 环境运行，在初始化与安装 Hexo 博客框架与其插
        件时都离不开 Node.js。而 Git 是分布式版本控制系统，便于我们管理和跟踪博客代码的变化。在安装 Hexo 博客主题时，也离
        不开远程 Git 拉取第三方代码到本地。最重要的是，Hexo 编译生成的静态页面可以通过 Git 来部署到自己的仓库，配合静态服
        务器平台的网站部署与托管，实现本地提交并 Push 到仓库，服务器平台实时监测到仓库更新，自动 Pull 后重新构建静态页面，
        并且自动部署到静态服务器上。

       2.2 搭建过程中需要使用到的工具
           本文中使用 GitHub 来作为博客仓库，使用 Netlify 来进行构建与静态页面的部署。鱼友们也可以使用 GitLab 等托管平台，
        进行博客代码的托管；使用 GitHub Pages （不推荐，经常无法访问）等平台来进行页面的构建。为了避免过程中出现的许多不
        确定因素，新手鱼友们还是和楼主使用一样的工具吧！

           另外，这里也建议使用 Vs Code 当作过程中的代码与配置的编写工具。

       2.3 准备验证邮箱与可接收验证码的手机号
           因为各平台账户注册途中，可能需要邮箱或手机号来绑定并接收验证码。因为论坛中有许多年轻的鱼友，要记住请在父母的同意
        下进行操作哦。

       2.4 准备好合适上网工具
           因为教程中有许多境外网站（例如 GitHub、Netlify），因为服务器在遥远的大洋彼岸，过程中可能需要进行部分配置或科学上
        网才能有更快的访问速度。鱼友们可以尝试访问 GitHub 与 Netlify 试着看看自己是否需要工具进行辅助访问。
           若无法正常访问以上网站，建议使用 FastGitHub 工具进行访问。工具使用简单，只需打开程序即可自动在后台配置合适的 DNS
        IP  来进行访问。请鱼友们在下载并打开后，重新进行网站的访问，若可以正常访问，那么准备工作差不多到此结束！

    3. 账户的注册

       3.1 GitHub 账户注册查看此篇帖子：GitHub 账户注册与基础使用 只需操作至【I.账号注册】即可

       3.2 Netlify 账户可直接使用 GitHub 进行登入

       3.3 基础搭建只需要这两个账户即可，但若使用某些插件需要使用某些服务接口，也需要再次注册账户

    4. 下载安装包

       Node.js (nodejs.org) 与 Git (git-scm.com) 蓝奏云下载地址：安装包.zip - 蓝奏云 (lanzouf.com)

       FastGitHub 蓝奏云下载地址：FastGitHub_Win-x64.zip - 蓝奏云(lanzouf.com)

       开始教程前，建议先将 FastGitHub 开启，以便有着较为合适的网络速度访问教程中相关官网

               

Twilight6

博客本质也是写，写笔记，积累经验，对博客不感兴趣的鱼友们完全可以不用搭建！因为这其实就相当于一种云笔记而已！

喜欢做笔记的鱼友们，同样直接在论坛发布笔记、在电脑记事本编写笔记、乃至在纸上书写也是与博客一样的道理！

但是感兴趣的鱼友搭建了博客，更不应忘记本心，博客的本质同样在于写！在于积累经验！

所以此帖子主要面向那些真的想搭建博客的人，但同楼主当时一样仅存于想法中，希望楼主能成为一些鱼友的引路人，让你的想法转变为实现！

liuhongrun2022

顶顶顶
我之前用hexo搭建过
由于没有合适的教程，只能看官方文档一点一点摸索
马上弄好的时候，不知输入了什么命令，index.html没了。。。
最后嫌麻烦直接用cnblogs了...

Twilight6

liuhongrun2022 发表于 2023-5-21 08:42
顶顶顶
我之前用hexo搭建过
由于没有合适的教程，只能看官方文档一点一点摸索

博客同样是工具，不要遗失本心就行！

liuhongrun2022

Twilight6 发表于 2023-5-21 10:16
博客同样是工具，不要遗失本心就行！

对
博客最重要的是写文章

歌者文明清理员

why

Twilight6

歌者文明清理员 发表于 2023-5-21 12:45
why

执行它提示你的那句命令：

1. npm install --force

复制代码

然后再次初始化

歌者文明清理员

Twilight6 发表于 2023-5-21 12:59
执行它提示你的那句命令：然后再次初始化

谢谢，置顶一下我们的贴子吧，到时候有人问可以看

歌者文明清理员

Twilight6 发表于 2023-5-21 12:59
执行它提示你的那句命令：然后再次初始化

1. Microsoft Windows [版本 10.0.19045.2965]
   
2. (c) Microsoft Corporation。保留所有权利。
   
3. 
   
4. E:\blog>git init
   
5. Initialized empty Git repository in E:/blog/.git/
   
6. 
   
7. E:\blog>git add .
   
8. warning: adding embedded git repository: themes/butterfly
   
9. hint: You've added another git repository inside your current repository.
   
10. hint: Clones of the outer repository will not contain the contents of
    
11. hint: the embedded repository and will not know how to obtain it.
    
12. hint: If you meant to add a submodule, use:
    
13. hint:
    
14. hint:   git submodule add <url> themes/butterfly
    
15. hint:
    
16. hint: If you added this path by mistake, you can remove it from the
    
17. hint: index with:
    
18. hint:
    
19. hint:   git rm --cached themes/butterfly
    
20. hint:
    
21. hint: See "git help submodule" for more information.
    
22. 
    
23. E:\blog>git commit -m "Msg"
    
24. [master (root-commit) e80258b] Msg
    
25. 12 files changed, 2529 insertions(+)
    
26. create mode 100644 .github/dependabot.yml
    
27. create mode 100644 .gitignore
    
28. create mode 100644 _config.landscape.yml
    
29. create mode 100644 _config.yml
    
30. create mode 100644 package-lock.json
    
31. create mode 100644 package.json
    
32. create mode 100644 scaffolds/draft.md
    
33. create mode 100644 scaffolds/page.md
    
34. create mode 100644 scaffolds/post.md
    
35. create mode 100644 source/_posts/hello-world.md
    
36. create mode 100644 themes/.gitkeep
    
37. create mode 160000 themes/butterfly
    
38. 
    
39. E:\blog>git remote add origin https://github.com/dddddgz/blog.git
    
40. 
    
41. E:\blog>git push -u origin main
    
42. error: src refspec main does not match any
    
43. error: failed to push some refs to 'https://github.com/dddddgz/blog.git'
    
44. 
    
45. E:\blog>

复制代码

Twilight6

歌者文明清理员 发表于 2023-5-21 13:17

你应该是忘记把主题仓库里的 .git 文件夹删了

歌者文明清理员

Twilight6 发表于 2023-5-21 13:21
你应该是忘记把主题仓库里的 .git 文件夹删了

1. Microsoft Windows [版本 10.0.19045.2965]
   
2. (c) Microsoft Corporation。保留所有权利。
   
3. 
   
4. E:\blog>git init
   
5. Reinitialized existing Git repository in E:/blog/.git/
   
6. 
   
7. E:\blog>git add .
   
8. 
   
9. E:\blog>git commit -m "Msg"
   
10. On branch master
    
11. nothing to commit, working tree clean
    
12. 
    
13. E:\blog>git remote add origin https://github.com/dddddgz/blog.git
    
14. error: remote origin already exists.
    
15. 
    
16. E:\blog>git push -u origin main
    
17. error: src refspec main does not match any
    
18. error: failed to push some refs to 'https://github.com/dddddgz/blog.git'
    
19. 
    
20. E:\blog>

复制代码

Twilight6

歌者文明清理员 发表于 2023-5-21 13:22

git remote 关联只需要调用一次即可，另外最后的报错显示找不到这个分支，但是前面你提交时候显示的是 master

而不是 main，所以你试着将最后行代码更改为

1. git push -u origin master

复制代码

安装 git 时，你应该使用了默认的 master 作为分支名吧？而没有修改为 main

那么此后若没有指名分支，那么就为默认设置的分支名

歌者文明清理员

Twilight6 发表于 2023-5-21 13:29
git remote 关联只需要调用一次即可，另外最后的报错显示找不到这个分支，但是前面你提交时候显示 ...

这样算正常吗
Microsoft Windows [版本 10.0.19045.2965]
(c) Microsoft Corporation。保留所有权利。

1. E:\blog> git push -u origin master
   
2. warning: ----------------- SECURITY WARNING ----------------
   
3. warning: | TLS certificate verification has been disabled! |
   
4. warning: ---------------------------------------------------
   
5. warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
   
6. warning: ----------------- SECURITY WARNING ----------------
   
7. warning: | TLS certificate verification has been disabled! |
   
8. warning: ---------------------------------------------------
   
9. warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
   
10. info: please complete authentication in your browser...
    
11. warning: ----------------- SECURITY WARNING ----------------
    
12. warning: | TLS certificate verification has been disabled! |
    
13. warning: ---------------------------------------------------
    
14. warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
    
15. warning: ----------------- SECURITY WARNING ----------------
    
16. warning: | TLS certificate verification has been disabled! |
    
17. warning: ---------------------------------------------------
    
18. warning: HTTPS connections may not be secure. See https://aka.ms/gcm/tlsverify for more information.
    
19. Enumerating objects: 17, done.
    
20. Counting objects: 100% (17/17), done.
    
21. Delta compression using up to 12 threads
    
22. Compressing objects: 100% (11/11), done.
    
23. Writing objects: 100% (17/17), 27.98 KiB | 6.99 MiB/s, done.
    
24. Total 17 (delta 0), reused 0 (delta 0), pack-reused 0
    
25. To https://github.com/dddddgz/blog.git
    
26. * [new branch]      master -> master
    
27. branch 'master' set up to track 'origin/master'.

复制代码

Twilight6

歌者文明清理员 发表于 2023-5-21 13:30
这样算正常吗
Microsoft Windows [版本 10.0.19045.2965]
(c) Microsoft Corporation。保留所有权利。
...

对，正常，前面是 warning 是警告，好像是证书有关的警告，我了解也不多

另外你前面报错的图片评论别删，我教程中直接引用了哦

歌者文明清理员

Twilight6 发表于 2023-5-21 13:34
对，正常，前面是 warning 是警告，好像是证书有关的警告，我了解也不多

另外你前面报错的图片 ...

另外hexo init那个需要win+r，cmd，ctrl+shift+enter(管理员模式运行cmd)
然后再手动cd

Twilight6

歌者文明清理员 发表于 2023-5-21 13:37
另外hexo init那个需要win+r，cmd，ctrl+shift+enter(管理员模式运行cmd)
然后再手动cd

！还能这样以管理员模式运行，我学到了

那个管理员的稍等我额外多加一部分教程

歌者文明清理员

Twilight6 发表于 2023-5-21 13:40
！还能这样以管理员模式运行，我学到了

那个管理员的稍等我额外多加一部分教程

还有vi部分的1.5章节，少了个换行

Twilight6

歌者文明清理员 发表于 2023-5-21 13:41
还有vi部分的1.5章节，少了个换行

能截个图吗，我这儿好像看不出问题

歌者文明清理员

Twilight6 发表于 2023-5-21 13:45
能截个图吗，我这儿好像看不出问题

歌者文明清理员