阅读 205

手把手教你搭建个人博客,最快5分钟快速搭建简约风格博客

文章每周持续更新,各位的「三连」是对我最大的肯定。可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇)

傻瓜式一站式教你用github pages 来搭建博客,详细记录全过程,人人都能搭博客。

开始

先看下博客整体效果。点击在线预览我的博客

blogPage.png

支持特性

  • 简约风格博客

  • Powered By Jekyll

  • 博客文章搜索

  • 自定义社交链接

  • 网站访客统计

  • Google Analytics 网站分析

  • Gitalk评论功能

  • 自定义关于about页面

  • 支持中文布局

  • 支持归档与标签

建立博客Git仓库

首先你要在github上有自己博客仓库,用来生成和存放博客文章。你可以直接fork我的博客仓库。这样你马上有了自己的博客仓库。

点这里我的博客地址进去fork,之后在你自己的仓库下会看到刚复制的仓库。以后的操作都在你自己的仓库进行。

fork博客.png

**版权声明: fork之后_posts文件夹内容是我的博客文章,版权归我所有。你可以选择删除里面的文章替换上自己的或者转载附上链接注明出处。 **

修改博客仓库名称

进到你自己的博客仓库,修改博客仓库名称成你自己的用户名。github page解析的时候找的是这个 username.github.io的仓库名。

修改仓库名称.png

此时,不出意外的话,打开域名https://username.github.io 就能看到你刚搭建的博客了。注意替换username成你自己的github用户名

博客配置

上面点开域名看到的还是我的博客配置,显示的博客名字也是我的。还需要更改配置才是你的博客。

博客的配置文件是仓库根目录下的_config.yml文件,直接点开它编辑。

config文件.png

你还需要更改以下配置:

博客名称和描述

更改名称.png

分别是博客名称和描述,自己任意写点啥。

博客社交链接

更改社交链接.png

这里配置社交链接按钮,没配的不显示,我现在配了知乎、邮箱、github账号三个。其他你想加自己加上就可以。

配置gitalk

这个是评论功能的配置。评论功能基于gitalk,在配置文件中找到gitalk配置项目:

修改规则如下:

gitalk:
  clientID: <你的clientID>
  clientSecret: <你的clientSecret>
  repo: <你的repository名称>
  owner: <你的GitHub用户名>
复制代码

原理是利用github的issues评论文章。其中clientID和clientSecret需要点击这里创建

创建gitalk鉴权app.png

点绿色按钮创建,成功之后会得到以上两个id,修改配置即可。

Google站长统计

首先你要去注册一个Google Analytics账号,它可以统计你博客网站的访问人数,访问来源等非常丰富的网站数据。如果你不在乎可以不用跳过这节。不过要把配置中我的google_analytics: UA-XXXXXXX-X删除,否则统计到我的去了

# Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking
google_analytics: UA-XXXXXXX-X
复制代码

下面是我的网站实时分析页面展示:

google分析页面.png

由于不可描述的原因,国内注册账号可能会遇到问题,所有不配置也没关系。

博客网址配置

# Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co)
# Used for Sitemap.xml and your RSS feed
url: https://yourname.github.io
复制代码

这里配置你自己的博客地址。

配置提交

对_config.ymld的修改需要提交才能生效,点下图中绿色按钮提交。

配置提交.png

done! 现在输入上面提到的博客地址,回车,你拥有了自己的博客。

如何写博客

好了,博客有了。如何更新文章呢?

文章用markdown语法,写好统一放在_post文件夹下上传,git page会自动从你的git仓库拉去解析成网页,立刻就能在你的博客网页浏览。

关于文章的命名格式:博客文章必须按照统一的命名格式 yyyy-mm-dd-blogName.md 比如我这篇博客的名字是2019-11-22-create_blog_with_github_pages.md

看到这里,如果只是简单的想写博客已经大功告成,戳原文记录了一些DIY的过程和遇到的问题。

原创不易,看到这里动动手指,各位的「三连」是对我持续创作的最大支持。

更多

可以微信搜索公众号「 后端技术学堂 」回复「资料」有我给你准备的各种编程学习资料。文章每周持续更新,我们下期见!