【方法】搭建自己的个人博客主页

比眉伴天荒 2022-05-15 05:47 204阅读 0赞

2019/11/6 更新

看到了很多精美的Jekyll主题，在这里作为一个收集吧，随时想换就可以换

[Minima][]，[效果][Link 1]

[Alembic][]

还有Hexo主题

NexT, [效果][Link 2]

Icarus，[效果][Link 3]

--------------------

看着那么多大牛都有自己的个人博客主页，甚是羡慕，所以我也来假装假装大牛，希望不要被识破。

[参考链接][Link 4]， [柏荧大神][Link 5]写的是真的详细，我是跟着他的教程手把手搭建的，过程中我也添加了一点自己的心得，本来是想要直接转载的，但现在用我的经历重新编辑分享出来，就写原创咯。

声明这是利用现有资源复现的，不具有我的知识产权。

所使用的 [GitHub Pages][] + [jekyll][] 的方式，下图为博客样式。

![format_png][]

我所使用的环境为Windows，Mac的就去参照原作者的吧。

# **我们开始吧！** #

**步骤一****：**因为安装 Jekyll 的最好方式就是使用 RubyGems，所以我们先要安装Ruby，打开[Ruby下载网站][Ruby]，选择最新版下载，且要带上DEVKIT，如下图所示：

![70][]

下载好直接安装，一步一步进行下去就好，选项里，选择添加到环境变量并且默认编码UTF-8加上，等一会就安装好了。

**步骤二****：**然后执行

> $ gem install jekyll
> 
> $ gem install jekyll bundler
> 
> $ gem install jekyll-paginate

到这里我们先停一下，访问博客的本地工具我们都装好了，那我们的博客内容呢，jekyll一查就知道是将纯文本转换为静态博客网站的方法，所以我们先来把文本的东西做好。

**步骤三**：直接下载我的[代码库][Link 6]，下载好后解压，这里面包含了所有你需要的内容

然后在文件夹里打开命令提示符（按住shift再单击鼠标左键选择打开命令提示符）

然后输入：

> jekyll s

正常的话会输出

![70 1][]

然后到浏览器，输入地址http://127.0.0.1:4001/就可以在本地访问博客了。

本地访问了肯定还不够呀，我要发布到网上，利用github.io的服务器是免费的。

我这里仅仅面对已经会使用github的读者，新建一个仓库，然后把我的在这个文件夹内容直接复制粘贴过去，命名为xx.github.io即可。**xx是你的github账号名，不是任意的！！！**

然后修改CNAME（是将这个github.io的地址与你自己的服务器地址绑定）里面的内容，将地址改为你现在的命名，然后等一段时间就可以用https://xx.github.io访问了。发布成功后你的邮箱会收到邮件的。

--------------------

上面是小白无脑搭建博客的方法，这也是我的博客，那如何修改里面的内容呢？下面简单介绍一下

\_config.yml是页面配置文件，你进去之后就知道怎么相应的修改了，我写了注释的

about.html是关于页面的内容，你会点html就明白了

index.html里面可以修改座右铭内容

img文件夹是存放图片的

\_posts文件夹是存放博客文章的

\_layouts文件夹是博客主题设置的，可以不动

修改icon，就替换掉img文件夹下的favicon.ico文件即可

![70 2][]

--------------------

下面再讲讲如何写博客文章吧

用的是markdown语言来写的，这是一个非常高效优雅的语言，学习一下吧。

首先新建的.md文件按 2017-02-04-Hello-2017.md时间+标题的形式，空格用-替换连接。打开内容，你可以参考我的其中一个，前几行是配置，你修改一下，然后下面就可以开始写正文了。

插图记得用图床url的方式

如果还有疑问那就提出来吧

[Minima]: https://github.com/jekyll/minima/
[Link 1]: https://jekyll.github.io/minima/
[Alembic]: https://alembic.darn.es/
[Link 2]: https://theme-next.org/
[Link 3]: https://blog.zhangruipeng.me/hexo-theme-icarus/
[Link 4]: https://www.jianshu.com/p/e68fba58f75c
[Link 5]: http://qiubaiying.top/
[GitHub Pages]: https://pages.github.com/
[jekyll]: http://jekyll.com.cn/
[format_png]: /images/20220515/f7a4f78d53cb491db24f1389354f602d.png
[Ruby]: https://rubyinstaller.org/downloads/
[70]: /images/20220515/70a21de3cf1643efa8a7a9b06bb023af.png
[Link 6]: https://codeload.github.com/yzy1996/yzy1996.github.io/zip/master
[70 1]: /images/20220515/e01b594136f14b8aa1ddb446e4e15481.png
[70 2]: /images/20220515/a5a7fad8f2cf470cbeede5641edab860.png