个人网站的搭建(基于GitHub和Jekyll主题 )

版权声明:转载请联系作者[email protected] https://blog.csdn.net/qq_19799765/article/details/80869363

最近心血来潮,想自己搭建一个网站玩玩。看了不少教程,最终决定用GitHub来建立自己的网站。

网站的效果如图

这是链接 → GYC的博客

网站效果图

下面进入正题:

综述

1、网站使用GitHub域名并使用GitHub的代码仓库存放网页源代码当作网站的服务器

2、使用的网站主题是GitHub上的jekyll-theme-H2O

3、网站使用Jekyll进行文章管理。

4、使用百度统计查看网页的流量来源。

搭建网站

看了网上的很多文章,很多需要买域名、买服务器,除此之外,域名还需要在网信部备案,极为麻烦。无意中看到GitHub的仓库可以作为网站的服务器,还不用申请域名,确实方便,便决定使用此方案。

首先要申请一个GitHub账号,这就不用说了。GitHub现在已经不再被墙,可以不用科学上网工具随意访问。
我的GitHub主页

创建一个新仓库(Repositories),用于存放我们的网页源码,注意勾选上Initialize this repository with a README

并给自己的仓库(Repositories)命一个名称,注意:名称格式为:username.github.io(username是你GitHub用户名,最好不要用别的),username.github.io将成为网站的网址。
GitHub仓库

进入到仓库界面,点击settings往下拉,找到Github pages设置界面,在source选项里选择master branch,然后点击save保存。也可以在Theme Chooser里选择一个网页主题,也可以随后自己从网上下载自己喜欢的主题(推荐后者,因为自带的主题太少了)。
生成网址

这时候你的一个简单的网站已经搭建好了。对,你没听错,就这么简单!在Source上面出现了Your site is published at thhps://username.github.io/字样,这就是你自己网站的网址了。

参考《三分钟在GitHub上搭建个人博客》

主题美化

搭建好网站之后第一件事情肯定是找一个(gao)喜(bi)欢(ge)的网页模板,当然,如果你懂网页设计,可以自己做一个;如果是不懂这一方面的话,就从网上找模板吧。这里推荐从GitHub上下载Jekyll类型的模板,便于使用Jekyll Writer管理博文。

下载后解压出网页源代码,并找到文件名为_config.yml的文件,在这个文件里面你可以修改网页的名称,要展示的内容等等。
config

然后就是把网页源代码上传到GitHub上刚创建的仓库里了,这里有两种方案。一种是通过GitHub Desktop上传,一种是通过GitHub网页端上传。这里介绍从GitHub Desktop上传。

Github Desktop使用比较简单,没有复杂的命令行,可以直接从官网下载,下载安装过程就不说了,不会了自己百度。

打开GitHub Desktop,点击file,选择Clone repository,选择username.github.io,因为是国外的服务器,速度也许比较慢,耐心等一会儿。
clone

然后就把这个仓库克隆到了本地,一般在/文档/github文件夹里,把你刚改好的整个源码复制到这里。转到GitHub Desktop界面,这时候它已经检测到了本地文件的变换,在左下角输入这次改动的摘要就可以上传了,点击Commit to master,再点击Fetch origin完成上传。
change

这时候你的网页已经完善好了并进行了美化。

博客管理

有很多上传博客的方法

一种是用记事本写好上传:一般Jekyll的主题有一个_post文件夹,在里面有很多以.md为扩展名的文件,这就是在网站上显示的博文。你也可以用记事本编辑博文,保存为.md格式,然后再使用GitHub Desktop同步到GitHub仓库里。
目录

也可以使用Jekyll Writer管理:首先下载Jekyll Writer,安装过程就不说了,打开后再菜单里找到Account,点击GitHub的图标并添加你的账户,之后会自动扫描你的GitHub仓库找到你的博客仓库,如果在Blog Account里除了public选项还有你的GitHub名称,就说明扫描成功了。
Jekyll

在菜单栏File里,你可以新建post,也可以管理现有的post
post

Enjoy it!

参考《从零开始在GitHub上部署个人博客——写给大家看的教程》

流量统计

网站搭建好了,那么怎么知道自己的网站有没有人看,看了些什么内容呢,这时候就需要用到百度的一个服务——百度统计

这个服务是免费的,注册账号并完善身份信息,你就可以开始使用了。
baidu_serve

点击新建网站,将你的网址输入进去
site_monitor

点击获取代码,将这段代码加入到你的网页模板中名为header.htm的文件头,保存并用Github Desktop同步到GitHub,点击代码检查,如果提示代码安装正确,就表示你可以监控网站流量了。
code1
code2

猜你喜欢

转载自blog.csdn.net/qq_19799765/article/details/80869363
今日推荐