Jeklly搭建个人博客

本文最后更新于:2022年5月29日 上午

前言

今天在清理电脑文件时,不小心把以前记录的学习笔记给清理掉了!!当时那个心疼啊。顿时醒悟想到把自己的学习笔记放到博客上,防止本地误删。于是百度了一下哪个博客好。发现Github可以搭建个人的博客网站,于是果断就选择了使用Github。

我的个人博客是参考BYQiu大神的博客模板来进行搭建修改的,在此特别感谢。

关于GitHub Pages

这是它的官网介绍GitHub pages

开始搭建

主页效果图

V1qGa6.png

使用GitHub Pages 建立博客

1、首先你要有一个Github账号

2、然后新建一个仓库,点击右上角的 + 新建一个仓库,如下图所示:

V1qlrR.png

3、接下来克隆我的仓库到你的本地

1
git clone https://github.com/Magicalsoso/Magicalsoso.github.io.git

4、在本地新建一个文件夹,文件夹命名使用你刚刚新建的仓库名,然后把你刚刚下载的我的仓库里的文件夹,全部复制到你的文件夹目录下。

5、接下来,在你的文件夹下运行命令,使用git把全部内容推送到你新建的远程仓库。

1)初始化一个Git仓库

1
git init

2)把文件添加到仓库

1
git add <filename>

3)把文件提交到仓库

1
git commit -m "initialization file"

4)将本地和远程仓库关联起来

1
git remote add origin <你的远程仓库地址>

5)推送内容到远程仓库

1
git push -u origin master

等待上传完成,进入你的仓库页面,然后点击environment->View deployment进入你的个人博客。当然,现在看到的都是我的博客的内容, 如果不喜欢这个主题也可以到Jekyll官网找自己喜欢的。

修改仓库内容

博客算是搭建完了, 但要变成自己的内容, 还需要修改代码。

如果不想太多了解代码, 简单一些, 我们只需要改一点点就行。

网站基本设置

先来看 _config.yml 文件

V1qQM9.png

这里一般都看的懂, 根据自己的来改就行

社交网络设置

然后就是看着

V1qnGF.png

这里就是你其他的一些社交网络账户了网站与他对的就是下面这张图, 侧边栏也有

V1qmPU.png

没有可以删除或注释掉, 如果有其他的那就写上, 然后打开_includes文件夹下的footer.html文件

V1q1q1.png

找到图上面的代码, 复制图片中的两段中的一段, 粘贴到他们上面或者下面, 按照下图根据据自己情况来改

V1qu24.png

然后还有在_layouts目录下的 page.html的 100行左右也按照上面的来修改一下

博客评论修改

继续来看到_config.yml的这里V1qze1.png
这里是你关于博客的评论, 原博主讲的很详细了, 这里就直接引用一下为博客添加 Gitalk 评论插件

其他设置

其他还有就是 _config.yml 的 friends , package.json, manifest 根据自己的来修改还

剩下就是 about.html, index.html, tags.html 的开头部分,更据自己的来改

V1qKxJ.png

还有就是图片都放在 img 文件夹下 另外你修改一下pwa/icons的图片, 改成自己设计的就行

添加博客搜索功能

参考jekyll博客搜索插件

提交更改, 查看效果

修改完代码之后,我们就可以上传了,这里同样使用git命令进行提交。

1
2
3
4
git status
git add filename
git commit -m "message"
git push origin master

到此,我们的博客就已经完工了, 可以访问自己博客的地址浏览看一下效果。

最后,因为我们的博客文章是通过Markdown编写的,如果不懂如何使用Markdown格式,建议花个三十分钟看一下:认识与入门 Markdown


Jeklly搭建个人博客
https://kevinloongc.github.io/posts/35741.html
作者
Kevin Loongc
发布于
2019年4月18日
许可协议