原文在 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搭建博客

搭建一个自己的博客

0x0001

0x0001 lin_cx

Gitee 的 Pages 和 GitHub Pages 提供的是把静态网站部署到互联网的托管服务，在中国大陆需要备案等事情，还是挺麻烦的。

更推荐现在的云厂商提供的部署服务，对个人站成本非常低，速度也很不错，支持 HTTPS 和自定义域名。

另外腾讯云的云存储也有提供静态站的功能，就是需要备案才能用，不如前两个方便。
对象存储托管静态网站 - 文档中心 - 腾讯云

0x709394

稍微打个广告 https://purer.netlify.com/document-zh/

实际上建完之后还是有点些东西可以让它好用一点的。

路径

hexo 默认 permalink 是年/月/日/title
如果是中文标题后面就是一长串的urlencoded的中文。
觉得丑可以考虑改掉。 front-matter 或者 site config 里改都行

图片

假如你要在文章里插图片的话。Hexo本身使用markdown语法，自然可以用markdown来插入图片，前提是要有个url或者路径。如果用图床自然绝对路径。如果是实在要本地放图片的话直接用markdown会有路径问题。推荐打开 https://hexo.io/docs/asset-folders 然后用 https://github.com/7ym0n/hexo-asset-image

LaTex

一个简单的方法。换 https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus 然后引入katex完事（一般是主题的工作，主题没有的话改主题的模板）。开箱即用（
你会发现他其实是用的 @iktakahiro/markdown-it-katex

托管

0x0001 更推荐现在的云厂商提供的部署服务

GitHub Page 如果根路径成了blog，假如你别的项目想开GitHub Page 有时会有坑。。
Netlify 和 now 都用过。
他们跟GitHub Page的一个区别在于它自带构建。也就是实际上你可能不需要装node，hexo。。。你只管写写完push就好了。然后相比半墙不墙的GitHub Page国内访问速度也更快。还有就是绑定域名，自带HTTPS加成。

Netlify的节点是digitalocean貌似还套了个cloudflare，now的节点更好国内访问速度更快。Netlify还有minify和一些asset优化。minify之外的千万别开，因为他会上传到AWS 的 cloudfront CDN，国外是好事，国内一言难尽。

正如开头链接里所说我偏向于把主题分开一个仓库使用submodule管理。

Netlify自带支持submodule 和 git-lfs。但是git-lfs的支持有bug。
now 的 git integration 不支持submodule和lfs。不过可以通过 GitHub Action 之类的把构建过程解决。反正只需要 hexo g 生成的public目录部署到静态托管上就好了。

Colin_Downey

0x0001 Gitee 的 Pages 和 GitHub Pages 提供的是把静态网站部署到互联网的托管服务，在中国大陆需要备案等事情，还是挺麻烦的。

托管在GitHub的个人博客也需要备案吗……？

MikyMing

0x709394
关于markdown的图片部分，Tyora在0.9.84(beta)版中新增了对PicGo的支持可以尝试一下。其实我现在还在用相对路径(逃

0x709394

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

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

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

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

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

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

Bintou

使用已经这种办法支持LaTex了，请看效果 .挺方便的。

0x709394

Bintou 点进去post的图片路径貌似出问题了，可以看看上面的那个方法。还有首页archive的链接多了个%20估计是yaml哪里多了个空格。

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/ 路径在那堆日期后面的相对路径了。

0x0001

Colin_Downey GitHub 不需要，备案是服务器在大陆的话才需要，所以猜测 Gitee 应该是要备案的

Colin_Downey

0x0001 这样子。
P.S. 这个贴成功成为近半年最热闹的帖子，哈哈哈

0x0001

Colin_Downey P.S. 这个贴成功成为近半年最热闹的帖子，哈哈哈

是这样了哈哈，或许可以叫 ”一起来折腾博客“。

另外，热闹的应该不叫帖子，叫”话题“、”讨论主题“合适一些（在论坛软件 Flarum 里面这个叫 ”discussion“，URL 上也是 "discussion" 的缩写 "d"）

MikyMing

Colin_Downey
是的，hexo g -d才是正统且快速的做法。由于这篇文章是面向无基础的同学，不想涉及npm插件和.yml修改，所以才采用了copy的方法。

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
折腾了一个上午，似乎都不成功：
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，在私有仓库上存源文件，自动部署到公开仓库