使用GitHub搭建自己的个人博客网站

最新推荐文章于 2024-05-12 20:49:05 发布

ME_Seraph

最新推荐文章于 2024-05-12 20:49:05 发布

阅读量622

点赞数 1

分类专栏： web 文章标签： blog

本文链接：https://blog.csdn.net/pengshuyes/article/details/102076915

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文|Seraph

00 | 前期准备

注册好GitHub账号，并在本机部署好Git环境。如不熟悉Git/GitHub的使用，可以看下这篇《GitHub入门与实践》读书笔记或原书。
阿里云购买域名。

01 | 搭建GitHubPage

创建库
切记要输入与你账户名一致的库名，且一定要加.github.io后缀，这是为了访问以及域名解析方便。
我这里的账户名为：MEseraph
打开terminal，使用git clone克隆刚刚创建好的库。
在本地库MESeraph.github.io目录下新建一个index.html，内容如下：(这是一个简单的html网页）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1{
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>Hello Github</h1>   
</body>
</html>

使用 git add 及 git commit将index.html添加至本地库。
将修改更新至GitHub。
首次连接GitHub，需要如下一样输出账户和密码。
打开GitHub中刚新建的MESeraph.github.io库，然后点击setting，下拉找到如下页面：
打开上图的链接https://meseraph.github.io，即能打开我们刚新建的网页。即证明GitHub网页设置成功。

02 | 域名解析

在MEseraph.github.io下添加一个CNAME文件，文件内容填写已经购买的域名，如下：

www.liushupeng.cn

打开阿里云中域名解析页面，修改域名解析记录如下：
过一会就能使用该域名访问我们得GitHub Pages了。

03 | 使用Jekyll定制博客模板

去jekellthemes网站下载一套博客模板，我这里使用的是如下模板：
将文件解压后，放置MEseraph.github.io目录下，并使用git命令提交至GitHub。

这里git push前，需要先git pull一下，因为我之前是在GitHub网页上添加的CNAME，没有同步到本地库。
然后删除之前加的index.html文件，以及修改_config.yml中的baseurl: /texture 为baseurl: / 。因为我们为了能直接输入域名即能打开网页，没有直接用模板的texture目录，这里修改基础目录，为了网页都能正常访问相对位置的资源。
添加博客文
模板中博客文全部放置在_posts目录下：

如上我们添加了一盘博客文，注意格式一定是年-月-日-标题.markdown，markdown的后缀不能少，同时右侧可以预览效果。
这些模板的其它参数修改，请自行按自己理解修改，大部分参数都在_config.yml文件中。如下是我最后修改的模样。

04 | 其它

进一步了解jekell知识。
MEseraph账号是自己专门为了写这个博客文新建的github账户，实际常用的是seraph1990。
GitHub
liushupeng.top

05 | 问题处理

博客文Markdown表格预览没有问题，但是网页不显示表格线。
解决：
在博客文的相关html页面的Header中加入：

<style>
  table{
    border-left:1px solid #000000;border-top:1px solid #000000;
    width: 100%;
    word-wrap:break-word; word-break:break-all;
  }
  table th{
  text-align:center;
  }
  table th,td{
    border-right:1px solid #000000;border-bottom:1px solid #000000;
  }
</style>