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

补充几个框架：基于Go的[hugo](https://gohugo.io/),[Typecho](http://typecho.org/),

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

> @"MikyMing"#p3343 基于Go的[hugo](https://gohugo.io/),[Typecho](http://typecho.org/), 纠正下，Typecho 是基于 PHP 的，设计上和 WordPress 类似，但更加地精简。

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

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

突然发现一个巨大的问题，如何让Hexo支持Latex！参考一下[这篇博客](http://cps.ninja/2019/03/16/hexo-with-latex/)，还没折腾。还是需要很多时间去搞的。

用gitee pages部署速度更快点

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

@"lin_cx"#p3350 看了下，默认不支持 HTTPS 和自定义域名，还是挺局限的。 [upl-image-preview url=https://static.0xffff.one/assets/files/2020-04-07/1586235019-688448-image.png]

> @"MikyMing"#p3342 部署到GitHub Pages 这一步似乎并不应该另外克隆仓库下来诶，这样的话其实每一次修改都得把public文件夹下的内容复制过去。其实Hexo已经包括了git的操作。我的操作如下： 1. 打开[Git Bash](https://gitforwindows.org/)并且进入之前创建的文件夹（默认在C:\Users\Username\BlogName\），运行`npm install hexo-deployer-git --save`安装插件； 2. 打开文件夹里面的_config.yml，拉到文件末尾添加以下信息（注意修改GitHub的账户名）：[upl-image-preview url=https://static.0xffff.one/assets/files/2020-04-07/1586237523-863900-image.png] 3. 运行`hexo g -d`即可部署。参考：[Github和Hexo搭建博客](https://my.oschina.net/luomu624/blog/3011607)

搭建一个自己的博客

Omnipresent

我是直接csdn（逃

0x0001

Omnipresent 直接冲的话博客园会不会更好？csdn感觉有点杂，而且因为很多不标明来源的反复转载，导致有很多人搜索技术文时候会 -csdn.net 🤪

Heath-Wrong

Chever-John 现在博客美化基本完成了，看看效果我的blog，下一步就是上云了，我初步想的是再建一个仓库，把这些文件都传上去，这个方法比较简单也很方便，如果本地损坏，直接恢复就行。不过有点呆，可能会考虑用一下持续集成。
由于不想买服务器，又感觉通过不断地push来更新太麻烦了，我现在在找hexo静态博客无后端的解决办法。目前只找到了这个项目hexo++，不过项目组已经弃坑了。
不知道学长有没有办法。
要不是我不会，我就自己造一个轮子了（）

Chever-John

Heath-Wrong

你不必购买服务器。一些现成的 CICD 服务（jenkins，traviCI 就是这样的用处，免费的够用的）
hexo++ 我了解了一下，主要靠serverless实现的后端，不会有太大的难度的，可以直接冲！
我推荐一下 vercel ，这个也是官方支持了 hexo，其性能也够。

另：早点休息，注意睡眠。

charfole

Chever-John
CI/CD 服务现在 GitHub 里的 GitHub Actions 也支持了，可以达到通过 Git Push 将博客推送到仓库备份，同时触发 Action，部署到 GitHub Pages 的效果。

分享一个以上操作的小教程。

Chever-John

charfole hhhhhh，
我19年干这个的时候好像就是有的。
但当初我选择用 travis 是因为不太熟练。
就同时使用了 github action（触发hook 给 travi CI），
然后 CI pull 代码构建再反推回 GitHub。

不成熟的方案啦。不过玩得很开心。（头秃了好几天🙁

civil

wt……fantastic
进校后老师有让我们折腾博客但是我完全没有意识到0xffff上曾经有人做过详细教程，自己重新走了一遍前人的路，倒也学了不少东西，也是今天才突然找到这个古帖子挖坟……

0x0001

civil 自己动手才是自己的哈哈！

HSLix

交作业啦：https://hslix.github.io/

另外补充两个小点：

用 hexo init blog_name 前，可以先换源来加速初始化的下载，亲测用下面语句可以成功换源

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

github page 在 clone 前，记得要先 create 用户名.io 仓库，再clone

此外，hexo init 过程中，可能遇到 github 连不上443，clone 失败的情况，我的本地莫名奇妙的好了，不过看网上说，先搭好梯子再 init 就可以了

以上，感谢这篇帖子，感谢大家！如果这篇帖子是置顶的，或许我发现本论坛的第一天就搭这个 blog 了

0x0001

我这周末也初步完成了个人网站的重构：https://zgq.me

主要用 Next.js + MDX + Tailwind CSS 糊了一个壳，以 Markdown 作为内容源，替换掉原来 Notion 和 Nodbelium 的方案，在内核上保持一个极简状态，看机会再优化展示。

主要两点考虑：

用 Git 统一管理所有的关键数据，避免第三方依赖
把个人对外输出集中在一个域名下，方便整理回顾，足够可控和灵活

基本上没有离开 Markdown + 静态网站生成器的设定哈哈。

大原则是作为个人知识管理体系的对外部分，其他平台就作为一个 “分发渠道” 的性质，而非核心（没有精力去折腾，所以就懒的到处发了）。

stevessr

一些其他的框架
js : QEXO NotionNext vitepress vuepress
java: Halo
部署静态页面可以选用Cloudflare pages（美中不足的最大25mb单文件）
白嫖域名可以去~~us.kg~~ 也挂掉了
~~eu.org不批了😅~~

0x0001

stevessr 域名自己买不贵，重要的是一个所有权，以及对对外的链接的控制

ccweng

这几天忽然想在 vitepress / rspress 或者其他类似的“press”的基础上，糊成一个博客主题来承载 md 的内容，初步看了下 vitepress 是支持类似 DIY 的

~~之前用类似的方案比较多还是在写文档 / wiki 一类的站点比较多~~

HSLix

搭建和更新了一段时间，最近在更换主题时，顺便让博客网页生成永久固定链接，感觉挺有意思的，就在这里和大家分享一下。

简单地说，就是自动给每篇文章生成一串字符作为名牌，从而简化链接。原来默认的链接生成是permalink: :year/:month/:day/:title/，其中标题如果是中文的话，生成链接时会转化为长长的乱码。据说不利于被搜索到，不过本人对这个没什么想法就是了。

具体实现可以参考知乎文章，很简单，就是给 _config.yml 加几行代码。首先是更换链接为permalink: :year/:month/:day/:title/，下载npm包npm install hexo-abbrlink --save，再个性化配置链接生成的方式，比如abbrlink: alg: crc32 #support crc16(default) and crc32 进制 rep: hex #support dec(default) and hex 算法。

moreoronce

我现在是用NotionNext在Vercel上部署的博客，欢迎大佬们来访Deep Router

GodSaveJava

交作业了!https://godsavejava.github.io 不过还存在些优化和美化的问题，我使用的是fuild主题，但是加载封面图极慢（我又不想压缩图片画质），另外主题版块的毛玻璃效果明明在localhost4000上显示正常，部署到github上后又不显示了，后续再慢慢优化!各位大佬有什么意见的话可以指出！

deerplay

友链吗？
https://tempmailsafe.com
安全临时邮箱

« 上一页