如何搭建你自己的博客

因为本站来来回回折腾了好多次,所以也积攒了不少网站建设方面的文章,这些文章都是从实践入手进行讲解的,看到有这么多小伙伴都在询问我如何实现这个,如何实现那个的问题,因此我特意将网站建设归纳到一个版块,希望这个版块可以解决你的建站问题,同时我也在努力完善这个版块的内容。

静态博客生成

目前主流的静态博客生成器有三个: jekyll, hexo, hugo.

静态博客生成器是一种将 markdown 格式的文档生成静态网站页面文件的工具,我们通过几个简单的命令就可以实现个人博客的搭建。上面的 3 中博客生成器我没有用过 jekyll 而且今后也不打算用,所以接下来我们就围绕 hexohugo 的博客搭建来展开,而且如果你具有前端编程能力我推荐你一开始就是用 hugo 来搭建自己的博客,如果你不熟悉前端知识建议你使用 hexo 实现,因为 hexo 的优势就是有很多现成的插件, 而且可选的主题样式比较多。 我现在为什么从 hexo 更换到 hugo 是因为生成静态页面的速度考虑,可以参考我的博文 《我为什么要从 Hexo 更换到 Hugo》

我们使用 Hexo 或者 Hugo 只需要如下几个步骤就可以实现一个最基本的网站,甚至都不需要自定义。接下来先从大概搭建步骤上简要说明过程:

第一步:安装工具(Hexo 或 Hugo)

Hexo 安装的前提条件是有 Nodejs 环境:

npm install -g hexo-cli

Hugo 只需要下载官网的 二进制 程序,然后配置该程序的 Path 环境变量即可:

第二步:下载主题到 themes 文件夹内,并配置使用该主题

Hexo 和 Hugo 的主题(Themes)很多,可以去官网寻找或者去 GitHub 寻找。

第三步:启动预览并预览

Hexo 的启动:

hexo server

启动后可以使用默认端口访问: http://localhost:4000

Hugo 的启动

hugo server

启动后可以使用默认端口访问:http://localhost:1313

第四步:内容创作

Hexo 使用如下命令创建文章:

hexo new "my-first-post"

Hugo 使用如下命令创建文章:

hugo new post/my-first-post.md

第五步:生成静态文件并发布到服务器

Hexo 下生成静态文件的命令

hexo g

Hugo 下生成静态文件的命令(建议加上参数 –minify)

hugo --minify 

这样你就可以在 public 目录看到生成的静态文件内容,只需要将该内容同步到服务器即可。

Hexo 博客搭建

建议这是你的第一篇阅读文章,它是你认识并快速搭建 Hexo 博客的基础: 《使用GitHub/GitLab/码云搭建个人博客》

Hugo 博客搭建

Hugo 建站建议你先阅读上面的 Hexo 博客搭建部分,然后再阅读此文章: 《我为什么要从 Hexo 更换到 Hugo》

接下来你需要知道如何去配置你的博客: 《Hugo 配置文件详解》

网站美化和自定义

如果你想实现我的首页图片轮播效果,你可以参考这篇博文:《Hexo Icarus 主题首页添加走马灯效果》

如果你想实现我博客上的很多自定义内容,例如音乐播放、Live2d 小猫挂件、分享挂件、Chat 聊天挂件、Valine 评论插件和邮件评论通知、相册功能等可以参考我的这篇博文:《Hexo主题(Next)美化、配置、优化这一篇就够了》

如果你想实现一个瀑布流相册,可以参考这篇文章:《Hexo next 博客增加瀑布流相册页面》

这是一个在 Next 主题内实现通知功能的案例:《Hexo打造可以自由配置的网站通知和页面通知》

当然,如果你觉得 Next 主题不漂亮,你可以尝试转入我正在使用的主题:《博客更换ICARUS主题》

更换到 Hugo 后,你可能会遇到没有合适插件的苦恼,例如站内搜索,在这篇文章里面我们可以判断当前是否可以访问 Google 做一个双方案,优先使用 Google 站内搜索,如果当前环境不允许访问 Google 则会自动切换的百度站内搜索:《百度站内搜索的坑》

这也是一个不错的建议,因为我懒,所以暂时还是用的百度站内搜索, 你不妨看看:《使用 Hugo + Algolia 进行静态站点搜索 [译]》

SEO 优化

SEO 优化很重要,它可以提高你的网站内容收录量,这样就有更多的人看到你的文章了,快看看这个吧:《Hexo Next博客配置和SEO优化》

我们如果能主动提交给搜索引擎来收录我们新写的文章就尽量使用主动提交,这是一个主动提交的工具,建议你立马用起来:《Python脚本实现的百度熊掌号链接提交》

服务器相关

博客中的图片我们可以直接存放到服务器然后引入链接,也可以放到本地静态目录,这是第一种方法的解决方案:《Hexo博客七牛图床最优做法》

生成静态站点后我们就需要解决同步服务器问题,因为我使用的是七牛云存储,所以这里给出我的同步方案:《Hexo使用PythonSDK整站静态发布七牛云》