原文在0xFFFF CS Wiki

本文面向无基础学生。
博客为静态博客,无需费用。
使用的工具和框架:
GitHub Pages + hexo

为什么要搭建个人博客

  • 将自己的思考和学习经历记录下来作为一个知识沉淀的平台
  • 在搭建博客和升级博客的过程中学习技术
  • 展示你自己,并且可以作为他人了解你的渠道
  • 成为社区的一份子,帮助到他人。博客中记录的bug和经历可以让更多的人少走弯路。

优秀的个人博客推荐:

使用GitHub page + hexo快速搭建

环境准备

安装Node.jsGit并注册GitHub

安装成功检验:

在命令行执行下列命令:

$ 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或者菜鸟教程学习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。这个就请自行学习探索啦。

了解并丰富你的博客

以下是一些进阶网站:

进阶博客搭建

想必很多同学在完成简单的静态博客搭建后都想尝试更加绚丽,互动性和自定义更强的博客。
首先你需要购买一个域名,拥有一个服务器。
使用WordPress可以快速搭建一个动态博客。
如果你不仅仅满足于使用框架和平台,那么你可能需要去了解并学习一些更加深入的东西,前端可以用Vue或者React,后端用python的Django,Flask框架实现快速开发个人博客。

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

    之前搭建的Hexo博客一直荒废,看了这个帖子提醒我在我的Mac上重新部署起来。哈哈哈。折腾!
    搞这个前提有两个:
    1、懂得用MD写作;不用MD写作,这个Hexo也就没意义了。
    2、懂得Git的基本使用;这个前提有点隐秘,因为hexo d似乎已经把细节隐藏了,只是,本质上还是要Git。

    至于其他的问题,包括:主题、布局、部署到其他的软件仓库等等细节,深入做下去还是需要很多很多功夫。我一般都不折腾。能用就行的那种。

    今天我试图把之前的博客迁移到新的机器,不怎么成功(看了很多的帖子,都不怎么好用)。反正之前也没写什么,不如重新写。但是,如何迁移博客还是值得研究的。

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

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

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

      MikyMing 部署到GitHub Pages

      这一步似乎并不应该另外克隆仓库下来诶,这样的话其实每一次修改都得把public文件夹下的内容复制过去。其实Hexo已经包括了git的操作。
      我的操作如下:

      1. 打开Git Bash并且进入之前创建的文件夹(默认在C:\Users\Username\BlogName\),运行npm install hexo-deployer-git --save安装插件;
      2. 打开文件夹里面的_config.yml,拉到文件末尾添加以下信息(注意修改GitHub的账户名):
      3. 运行hexo g -d即可部署。

      参考:Github和Hexo搭建博客

        MikyMing

        根据我折腾的经验,因为现在有各种各样繁杂的工具,大家容易在各种工具中徘徊而忘记了博客的灵魂本质,补充一下这方面的想法。

        本质上,博客其实是一种 Web 站点,用于发布文档和各种资源,首先得理清 Web 网站方面的概念。

        Web 的工作模式

        理解 Web 的工作方式是关键。这时候就有了 URL 这个东西的存在,浏览器通过 URL 拉取资源下载和展示。具体的细节可以查一下维基百科的 URL 词条。我之前写过一个帖子梳理这方面的概念。 URL 与网络资源分享 - 0xFFFF

        一个发布在 Web 的文档,我们可以通过它的 URL 获取它,比如说之前发的一个帖子里面的 科大信息论课程的讲稿,它的URL是:

        http://home.ustc.edu.cn/~kunzhao/TA/ch1-2.pdf

        可以理解为:

        “按照 http 的规则(协议),连接互联网中域名为 home.ustc.edu.cn 的服务器,获得路径 /~kunzhao/TA/ch1-2.pdf 下的资源(文件)”

        因为格式是 PDF,浏览器会用 PDF 阅读器去展示获取到的这个文件。

        再举个例子:CNNIC 的中国互联网络发展状况报告

        http://cnnic.cn/hlwfzyj/hlwxzbg/hlwtjbg/201908/P020190830356787490958.pdf

        可以理解为:

        “按照 http 的规则(协议),连接互联网中域名为 cnnic.cn 的服务器,获得路径 /hlwfzyj/hlwxzbg/hlwtjbg/201908/P020190830356787490958.pdf 下的资源(文件)”

        为了浏览器方便展示,一般都会用 HTML 格式的文档,上面说的科大的课程主页:

        http://home.ustc.edu.cn/~kunzhao/index.html

        我们可以发现它请求的资源路径是 /~kunzhao/index.html,也就是说,我们拿到的是一个 HTML 格式的文档。

        这种文档定义了“超链接“,就是可以方便我们点击就打开的 URL。各种格式的文档资源与通过 URL 形成的链接关系就构成了 Web 的存在。

        Web 站点

        Web 站点也就是我们说的”网站“,一个服务器之下可以有不止一个文档,许多个互相带有链接的文档放在一个服务器上,就是一个 Web 站点(网站)。

        文档里面指向同一个站点的文档的链接叫做 ”内链“,指向外部站点的链接叫”外链“。

        对应到路径,一般一个目录(文件夹),就代表了一个站点,在它之下可以有多个网页文档。

        一些典型的站点:

        这样的 URL 我们发现并没有指定具体是哪个文档,然后就有了 ”默认主页“ (Default Index Page) 的概念,一般指向 /index.html 实际和服务器设置有关。

        对应的实际 URL:

        博客

        博客(Blog)原本名字叫 Weblog,网络日志,然后人们把 We 和 blog 拆开,就有了博客。主要是针对个人记录的一种网站类型,具有记录和交流的属性。

        参考:博客 - 维基百科, 摘录一段:

        博客最初的名称是Weblog,由web和log两个单词组成,按字面意思就是网络日记,后来喜欢新名词的人把这个词的发音故意改了一下,读成we blog,由此,blog这个词被创造出来。中文意思即網誌或网络日志,不过,在中国大陆有人往往也将Blog本身和blogger(即博客作者)均音译为“博客”。“博客”有较深的涵义:“博”为“广博”;“客”不单是“blogger”更有“好客”之意,看Blog的人都是“客”。而在台湾,则音译成“部落格”或“網誌”,书写者为“部落客”,认为Blog本身有社群组群的意含在内,借由Blog可以将网络上网民集结成一个大部落,成为另一个具有影响力的自由媒体。

        典型的博客(1楼也有哈哈):

        类似 WordPress、Hexo 等工具其实是一些辅助我们生成博客类型的网站的工具,通过它们我们可以很轻易地将我们的想法和记录发布到 Web 上。直接基于 Markdown 生成 HTML 工作量要小很多很多。

          0x0001 lin_cx

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

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

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

            稍微打个广告 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目录部署到静态托管上就好了。

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

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

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

                  © 2018-2025 0xFFFF