原文在 0xFFFF CS Wiki 本文面向无基础学生。博客为静态博客，无需费用。使用的工具和框架： GitHub Pages + hexo 为什么要搭建个人博客将自己的思考和学习经历记录下来作为一个知识沉淀的平台在搭建博客和升级博客的过程中学习技术展示你自己，并且可以作为他人了解你的渠道成为社区的一份子，帮助到他人。博客中记录的bug和经历可以让更多的人少走弯路。优秀的个人博客推荐：轮子哥/vczh 鳥哥的 Linux 私房菜王垠阮一峰的个人网站使用GitHub page + hexo快速搭建环境准备安装 Node.js 和 Git 并注册 GitHub 安装成功检验：在命令行执行下列命令： $ git --version git version 2.9.0.windows.1 $ node --version v10.15.3 $ npm --version 6.4.1 if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 安装Hexo 在命令行执行下列命令： $ npm install -g hexo-cli # -g 代表着全局安装 if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 完成后建立你的个人博客： $ hexo init blogName $ cd blogName $ npm install if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 博客文件夹的目录如下： ├───.git ├───scaffolds # 博客的模板文件夹 ├───source # 资源文件夹 │ └───_posts # 你的博客源文件(.md) └───themes # 主题文件夹 └───landscape # 默认主题 ├───.gitignore ├───.gitmodules ├───_config.yml # 博客的配置文件 ├───package.json # 项目管理文件 if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 创建你的第一篇博文新建一篇博文： $ hexo new '文章标题' if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 在 /source/_posts 文件夹下找到你的博文，使用Markdown编辑器打开并编辑。推荐使用Typora进行编辑。在 Markdown Guide 或者菜鸟教程学习Markdown语法。保存后运行： $ hexo generate # 生成静态文件，可简写为 hexo g $ hexo server # 启动服务器。默认情况下，访问网址为：`http://localhost:4000/`。可以简写为 hexo s if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 此时已经可以在 public 文件夹下看到完整的静态文件。在浏览器中输入 http://localhost:4000/ 就可以看到预览效果了。部署到GitHub Pages 在GitHub创建一个名为 username.github.io 的新仓库，其中 username 是您在GitHub上的用户名（或组织名称）。 ! 如果仓库的第一部分与您的用户名不完全匹配，则它将不起作用，因此请确保正确无误。转到要存储项目的文件夹，然后克隆新的仓库： $ git clone https://github.com/username/username.github.io if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 将之前生成的 public 文件夹下的文件拷贝到本地仓库中。再运行： $ git add --all $ git commit -m "Initial commit" $ git push -u origin master if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } 等待一段时间你就可以启动浏览器并转到 https://username.github.io 你就可以看到自己的博客啦！ // 将博客部署到GitHub还有其他方法，比如可以使用 hexo deploy 。这个就请自行学习探索啦。了解并丰富你的博客以下是一些进阶网站：超详细Hexo+Github Page搭建技术博客教程 hexo官网 GitHub Pages 进阶博客搭建想必很多同学在完成简单的静态博客搭建后都想尝试更加绚丽，互动性和自定义更强的博客。首先你需要购买一个域名，拥有一个服务器。使用 WordPress 可以快速搭建一个动态博客。如果你不仅仅满足于使用框架和平台，那么你可能需要去了解并学习一些更加深入的东西，前端可以用Vue或者React，后端用python的Django,Flask框架实现快速开发个人博客。

补充几个框架：基于Go的 hugo , Typecho ,

赞！！可以抛弃充满广告的 XSDN、XX园、X书了🌞 博客本身就是一种“我为人人，人人为我”的氛围下的体现，寄托于商业平台并不是那么靠谱，开源才是最好的归宿。搞起！

MikyMing 基于Go的 hugo , Typecho , 纠正下，Typecho 是基于 PHP 的，设计上和 WordPress 类似，但更加地精简。

之前搭建的Hexo博客一直荒废，看了这个帖子提醒我在我的Mac上重新部署起来。哈哈哈。折腾！搞这个前提有两个： 1、懂得用MD写作；不用MD写作，这个Hexo也就没意义了。 2、懂得Git的基本使用；这个前提有点隐秘，因为 hexo d 似乎已经把细节隐藏了，只是，本质上还是要Git。至于其他的问题，包括：主题、布局、部署到其他的软件仓库等等细节，深入做下去还是需要很多很多功夫。我一般都不折腾。能用就行的那种。今天我试图把之前的博客迁移到新的机器，不怎么成功（看了很多的帖子，都不怎么好用）。反正之前也没写什么，不如重新写。但是，如何迁移博客还是值得研究的。

Bintou 迁移的话，一般整个目录拷贝过去就可以了，可能需要删掉里面的 node_modules 重新装下依赖。

突然发现一个巨大的问题，如何让Hexo支持Latex！参考一下这篇博客，还没折腾。还是需要很多时间去搞的。

用gitee pages部署速度更快点

交作业： https://colindowney.github.io/ 过一段时间赶完作业慢慢折腾w

lin_cx 看了下，默认不支持 HTTPS 和自定义域名，还是挺局限的。

MikyMing 部署到GitHub Pages 这一步似乎并不应该另外克隆仓库下来诶，这样的话其实每一次修改都得把public文件夹下的内容复制过去。其实Hexo已经包括了git的操作。我的操作如下：打开 Git Bash 并且进入之前创建的文件夹（默认在C:\Users\Username\BlogName\），运行 npm install hexo-deployer-git --save 安装插件；打开文件夹里面的_config.yml，拉到文件末尾添加以下信息（注意修改GitHub的账户名）：运行 hexo g -d 即可部署。参考： Github和Hexo搭建博客

搭建一个自己的博客

0x709394

MikyMing
自从我发现zeit now 对个人用户免费不限流量之后特意开了一个私仓把图片部署到now上了🤭
写的话一般直接VSCode或者直接在GitHub上写了，因为GitHub上.md后缀有Preview。commit一下后面就全自动了。

如果图片放本地asset_folder的话可以试试 https://github.com/fengkx/hexo-native-lazy-load 本地图片可以直接读取宽高完全不reflow的lazy load。

MikyMing

0x709394
get lazyload！很有用的插件。另外zeit now大赞！正好看到

Bintou

0x709394 那个%20真是玄学！！！没道理官方文档都会有问题啊。。。图片好像没问题？谁再看看。。。

0x709394

Bintou
开源的看看代码就知道了。
下面看的是它的旧版。我从footer那里的链接点进去是旧版所以猜测老师用的是旧版的Next。
https://github.com/iissnan/hexo-theme-next/blob/master/layout/_partials/header.swig#L43
这里就是生成url的地方。

 {% for name, path in theme.menu %}

这里的theme.menu就是主题的config。https://github.com/iissnan/hexo-theme-next/blob/master/_config.yml#L94
name是键， path 就是值，然后经过模板的这么一个函数和pipe就成了渲染出来的url。
url_for(path.split('||')[0]) | trim
config文件中也有注释的。我不太了解swig的trim。还有为什么他要先url_for 然后再trim而不是先trim。所以我才会说

0x709394 估计是yaml哪里多了个空格。

但是如果trim了的话是不应该有%20。老师可以试试在模板里面log看看是什么原因吧。

图片的话首页确实可以显示，但是点到文章里面就不行了 https://lbwang.github.io/2020/04/07/sidh/ 路径在那堆日期后面的相对路径了。

Bintou

0x709394
折腾了一个上午，似乎都不成功：
1、插入图片那里，我按帖子装了asset-folders，但是现实不成功。hexo g有这个输出：update link as:-->/.io//ec.jpg ，ec.jpg只是我测试用的图片。这个link显然不对啊！

2、还有，支持LaTex那里，按hexo-renderer-markdown-it-plus 去做，也不行。不知道为何。想用hexo-renderer-markdown-it-plus的原因，就是hexo-math的LaTex语法好奇怪。不知道在theme那里需要设置什么。我用的是next。next支持mathjax和katex的。

有空帮忙看看。

Bintou

0x709394 这样都能访问到图片：http://lbwang.github.io/2020/04/09/csidh/ec.jpg ，但是就是显示不出来，见鬼了！

看了这个帖子 . 似乎可行。需要修改一个index.js 文件。

0x709394

Bintou hexo g有这个输出：update link as:-->/.io//ec.jpg ，ec.jpg

这个应该不是 hexo-asset-image 的输出来的。除了安装，图片也应该放在assert folder也就是跟md文件同名的文件夹里面。在 site config 里打开之后每次hexo new都会自动创建。用不到的话可以删掉。然后markdown的路径也按照README写的那样应该就好了。

Bintou 看了这个帖子 . 似乎可行。需要修改一个index.js 文件。

我记得之前是要改，但是某个版本更新了之后不改也行了现在。毕竟直接手改node_modules不是什么好习惯。

LaTex 具体什么问题我也不清楚。hexo-math 和 markdown-it-katex 是不能同时装的。排查的话首先看一下public有没有引入到 katex 的 CSS。如果有的话，看看是不是因为 markdown 中 LaTex 的一些转义的坑或者是markdown-it-plus 的config 的问题吧。可以copy一份现成的然后再去调整（控制变量😂）。如无意外应该是这样的。

Error

刚好前不久重整了下自己的GitHub page博客，分享一下。
这次我用了GitHub action，主分支放所有的md文件，再开一个分支放hexo的所有配置，让action去自动build+deploy博客，我只需要写好md推上去就行了。
这样的好处有几个（发这个评论时只凑出三个23333）：

不想氪金又没得白嫖GitHub会员的情况下，可以让自己的博客源文件闭源
基本不用担心迁移的问题，因为只需要维护md文件，甚至可以直接在GitHub网页上写博客
博客项目看起来更清晰

另外，我还在action里监控着我这个私有仓库的star事件，点一下star就可以发布博客。目前还有很多有趣的骚操作在酝酿中，没具体做出来就不说了，不知道可行性有多大。
或许可以搞一个通用的action来简化所有操作？进一步的，或许可以搞个东西来自动生成定制化的action.yml，方便各种群体？第二个是写评论时想到的，因为突然想起我物理系的朋友听完我这个博客方案懵掉了哈哈哈，这个东西可以直接前端js生成就好了，就酱~

0x0001

Error 不想氪金又没得白嫖GitHub会员的情况下，可以让自己的博客源文件闭源

大概是去年 GitHub 的私有仓库就免费了。

昨天他们又进一步放开了免费方案（

Error

Error 刚刚有人告诉我，这种源码private的GitHub博客已经有现成的GitHub action了，链接：https://github.com/sma11black/hexo-action

Error

重开一条评论，对于hexo，我一直有个问题没能解决。我写文章都是：post下所有的md文件所用到的图片都放在post/images里面，而网上的hexo图片方案都是要xxx.md的图片放到xxx文件夹，这对我很不方便呀。同时，我一般是相对路径引用图片。对于这两个问题，有什么解决办法吗？
我现在是自己写个小插件处理图片路径到博客的根目录，然后build完后把整个images移动到根目录。

0x709394

https://help.github.com/en/github/site-policy/github-additional-product-terms#a-actions-usage
挖矿之类的肯定不可以。。。而且私有库有时间限制。

Error 我现在是自己写个小插件处理图片路径到博客的根目录，然后build完后把整个images移动到根目录。

想要把图片放到根目录的话放到source下就会输出到根目录

Error

0x0001 对，但是不氪金的话，私有仓库是不能开GitHub page的，我这个曲线救国23333，在私有仓库上存源文件，自动部署到公开仓库

Error

MikyMing

Error 我现在是自己写个小插件处理图片路径到博客的根目录，然后build完后把整个images移动到根目录。

可以在你使用的主题文件夹下的source创建images目录。这同样会解析到根目录下的images文件夹中。可以直接使用/images/xxx.jpg来引用。
好像楼上老哥的更方便一点......

0x0001

Error 还有这一层的限制 🤯

有个远程的构建机的确可以做很多事情哈哈！

Error

0x0001 对，而且私有化之后，issue什么的那些全部都没用了，毕竟这个仓库存的还是自己私人的东西，不会有其他maintainer，所以我们可以利用action的监控功能，重新定义仓库的其他功能，这就等待挖掘了，虽然可能算是滥用了

0x0001

Error 不记得在哪里看到的，好像是有人拿 issue 做博客评论，然后有讨论这是否构成滥用，然后咨询了 GitHub 之后回复是只要符合 GitHub Terms of Service - GitHub Help 就可以做。

不清楚私有仓库和 Actions 是否有违反规则，大致翻了一遍，似乎没有相关的说法。

Error

0x709394 和 MikyMing 的方案并不符合我的需求，可能我没说清楚，是这样的：
我的posts下放着所有的md文章，posts/images放着所有的图片，md里引用图片是相对路径引用，这样是为了方便我本地阅读我的笔记。也就是说，我既想保持我本地的笔记库无需大改动，又可以发布到hexo博客。

这样，如果把images放到source下，那么就会变成./post放md，./images放图片，这样文件会比较乱了，md里引用图片路径还得全部改成../images/xxx.jpg。

还有一点，使用/images/xxx.jpg是不行的，会导致我本地阅读器找不到图片。我后来发现，使用images/xxx.jpg后，hexo生成的html是引用根目录，而./images/xxx.jpg却不行。现在我的小插件就是把路径全部处理成images/xxx.jpg。

0x709394

Error 先吐槽一下，老哥你一段话就一个句号中间一直逗号还和路径混着读着有点累。。。

Error 使用images/xxx.jpg后，hexo生成的html是引用根目录

不是这样的。是当前网页的相对路径，首页的时候是相对根目录，不同网页是不一样的。所以才会说

0x709394 直接用markdown会有路径问题

想要本地跟网页路径同时没问题就麻烦咯。网页的话Web Server都会有root可以设置。对于本地的markdown编辑器，/那就是磁盘根目录了。应该你现在这样改路径的方式算是比较好的方案了吧。

图片其实真不建议放本地了。图片这样的二进制文件如果用Git管理，随着图片多起来，.git目录会变得很大。而且因为Git版本管理的特殊性，你删了它，.git也不会小，于是乎这个repo越来越占空间。我尝试用git-lfs解决这个问题，确实很有效。但是静态托管的网站对lfs的支持都不是很完善而且私有仓库的LFS的流量和容量都有限额（免费）

Error

0x709394 好嘞，明白了。.git变大的确是个问题，之前没有没考虑到，我去看看git-lfs吧。谢谢啦~
被你一提醒，我去review了自己的评论才发现真的很累，我的锅。前面也忘了可以给路径套上那个markdown语法，我去编辑一下吧。