利用GitHub_Pages搭建简易个人博客

最新推荐文章于 2024-07-23 14:32:45 发布
最新推荐文章于 2024-07-23 14:32:45 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： Git Git分布式管理 文章标签： Github_Pages
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ds19991999/article/details/80708987
版权

个人博客已经开通：https://ds19991999.github.io，欢迎访问

1.基本实现

  1. 在github上建库，库名必须是usrname.github.com,usr必须是你github账号的用户名；
  2. 在Jekyll上面选择喜欢的模板下载到本地（以Bef为例）；
  3. Git操作，建议使用客户端Git命令行操作
//1.打开git bash，配置用户名和邮件
git config --global user.name "your name"
git config --global user.email "your email"

//2.克隆你在github上建立的要建立个人博客的库
git svn clone url

//3.提交文件测试
touch test.c //新建一个文件用于测试
git add test.c
git commit -m "第一次提交测试"
git remote add test.c https://github.com/ds19991999/ds19991999.github.com.git
git push //可能不成功，按照提示进行操作，可能是config里面的文件没有用户名和邮箱

//我用下面命令就就正常了，应该是之前的库是空的需要先建一个banch分支
git push test.c
git push --set-upstream test.c master

//4.直接将本地的Bef博客模板clone到远程库上
git banch //查看本地分支，此刻应该只有master一个分支
//git checkout -b  本地分支名 //新建本地分支并切换分支（在本地分支进行开发）
//git pull origin 远程仓库分支名//将远程仓库分支上的代码更新到本地
git status //查看当前状态
git add .  //提交所有  或者git add  提交文件名，此前应该将Bef模板中的文件直接clone到本地仓库
git commit -m "提交信息备注" //提交到本地仓库
git push origin 要提交的分支名称(一般是master)  //将本地仓库推送到远程仓库里面

//注：傻瓜式操作：直接将Bef文件夹中所有文件拖动到github仓库

4.访问自己的博客主页
https://usrname.github.io,比喻我的：https://ds19991999.github.io

2.关于GitHub Pages

GitHub Pages 是 GitHub 面向用户、组织和项目开放的公共静态页面搭建托管服
务，允许站内生成网页，也允许用户自己编写网页，然后上传。站点可以被免
费托管在 GitHub 上，可以选择使用 GitHub Pages 默认提供的域名 github.io
或者自定义域名来发布站点。GitHub Pages 支持自动利用 Jekyll 生成站点，
GitHub Pages 可以被认为是用户编写的、托管在 GitHub 上的静态网页。

搭建中小型 Blog，特别是个人博客，确实是个很好的选择。既拥有绝对管理权，
又享受 GitHub 带来的便利，更主要的是，这一切是免费的，GitHub 提供无限流量.

3.关于Jekyll的结构

|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

_config.yml

配置文件，用来定义你想要的效果，设置之后就不用关心了。

_includes

  • 存放一些小的可复用的模块;
  • 命令：{ % include file.ext %}（去掉前两个{中或者{与%中的空格，下同）这条命令会调用_includes/file.ext文件

_layouts

模板文件存放的位置。模板需要通过YAML front matter来定义
来定义，{ { content }}标记用来将数据插入到这些模板中来。

发布的文章会根据文章顶部的 yaml 文件头来设置一些元数据，如 layout:default，表示该文章的模板使用 _layouts 目录下的 post.html 文件；title:，表示该文章的标题，如果不设置这个值，默认使用嵌入文件名的标题等等。

_posts

你的动态内容，一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定，必须是2012-02-22-artical-title.MARKUP这样的形式，
MARKUP是你所使用标记语言的文件后缀名，根据_config.yml中设定的链接规则，可以根据你的文件名灵活调整，文章的日期和标记语言后缀与文章的标题是独立的。

在博客上发布文章的时候，只需要在此文件夹中加入带有 YAML 头信息的 MarkDown 文件，然后 push 到 GitHub，就会被自动渲染成 HTML。

_site

这个是Jekyll生成的最终的文档，不用去关心。最好把他放在你的.gitignore文件中忽略它。

其他文件夹

你可以创建任何的文件夹，在根目录下面也可以创建任何文件,假设你创建了project文件夹，下面有一个github-pages.md的文件,那么你就可以通过yoursite.com/project/github-pages访问的到，如果你是使用一级域名的话。

4.Jekyll的配置

配置文件在_config.yml文件中，不必一一追究了，需要的可以参考官方文档关于Jekyll配置的官方文档,但Permalink和自定义项这两个很重要。

用来定义你最终的文章链接是什么形式，他有下面几个变量：
- year 文件名中的年份
- month 文件名中的月份
- day 文件名中的日期
- title 文件名中的文章标题
- categories 文章的分类，如果文章没有分类，会忽略
- i-month 文件名中的除去前缀0的月份
- i-day 文件名中的除去前缀0的日期

配置效果
- permalink: pretty /2018/06/15/slap-chop/index.html
- permalink: /:month-:day-:year/:title.html /06-15-2018/slap-chop.html
- permalink: /blog/:year/:month/:day/:title /blog/2018/06/15/slap-chop/index.html
- permalink: /:title /github-pages

自定义项

例如我们定义了title:BeiYuu的博客这样一项，那么你就可以在文章中使用{ { site.title }}来引用这个变量了，非常方便定义些全局变量。

5.YAML Front Matter和模板变量

对于YAML格式的文章，Jekyll的格式很严格，必须是这样的：

---
layout: post
title: Blogging Like a Hacker
---

前后的—不能省略，在这之间，你可以定一些你需要的变量，layout就是调用_layouts下面的某一个模板，他还有一些其他的变量可以使用：
- permalink 你可以对某一篇文章使用通用设置之外的永久链接
- published 可以单独设置某一篇文章是否需要发布
- category 设置文章的分类
- tags 设置文章的tag

6.使用Disqus管理评论

注意是管理评论，Disqus支持很多的博客平台，注册账号什么的就不提了,参见下图：image

Unversal Code

这里使用网友推荐的Universal Code,然后会看到一个介绍页面，把下面这段代码复制到你的模板里面，可以只复制到显示文章的模板中：

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname 这个地方需要改成你配置的网站名
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

异步加载处理

为提高性能，需要进行异步加载处理，提高性能。比如在最开始页面打开的时候不显示评论，当你想看评论的时候，点击“显示评论”再加载Disqus的模块。

$('#disqus_container .comment').on('click',function(){
        $(this).html('加载中...');
        var disqus_shortname = 'beiyuu';
        var that = this;
        BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //这是一个加载js的函数
});

7.使用Gitalk添加评论功能

  1. 注册 GitHub Application，Authorization callback URL 填写当前使用插件页面的域名,比喻我的https//ds19991999.github.io/,注意注意记住最后的clientID 和 clientSecret，owner 是自己的用户名.
  2. 创建 comments.html(以about页面为例)
{% if page.comments != false %}

    {% if site.comments_provider == 'gitalk' %}
        <div id="gitalk-container"></div>
        <script src="/assets/js/gitalk.min.js"></script>
        <script>
        var gitalk = new Gitalk({
            id: '{{ page.url }}',
            clientID: '{{ site.gitalk.clientID }}',
            clientSecret: '{{ site.gitalk.clientSecret }}',
            repo: '{{ site.gitalk.repo }}',
            owner: '{{ site.gitalk.owner }}',
            admin: ['{{ site.gitalk.owner }}'],
            labels: ['gitment'],
            perPage: 50,
        })
        gitalk.render('gitalk-container')
        </script>
    {% endif %}
{% endif %}
  1. 在 GitHub 上创建仓库 blog-comments，添加如下代码到 _config.yml
    clientID 和 clientSecret 是第一步注册的时候得到的，owner 是自己的用户名.
comments_provider: gitalk
gitalk:
    owner: jueye3
    repo: blog-comments
    clientID: fa5504fe07f319cba9ee
    clientSecret: 30532bea61e8b63dc5a852e448621a8c89cef99b
  1. 下载 gitalk.min.js 和 gitalk.css
    下载 gitalk.min.js（放到 assets/js 文件夹下）和 gitalk.css（放到assets/css 文件夹下）， push 后访问.
  2. 使用 GitHub 账号登陆初始化，就可以使用评论功能了.

8.添加代码高亮插件

两个可选插件DlHightLight代码高亮组件和Google Code Prettify。DLHightLight支持的语言相对较少一些，有js、css、xml和html，Google的高亮插件基本上任何语言都支持，也可以自定义语言，也支持自动识别，也有行号的特别支持。

Google的高亮插件使用也比较方便，只需要在\

的标签上加入prettyprint即可。

9.增加统计插件

  1. 在百度统计上注册账号并登陆，然后新增网站
    image
    image
  2. 在 _includes 下创建 baidu-anaylysis.html,内容是百度统计生成的代码，如下图:
    image
  3. 在 head.html 文件中添加 {% include baidu-anaylysis.html %}，Push后可以检查是否成功
    image
  4. 代码正确安装，可以查看报告了
    image

10.绑定域名

在github库中

新建一个 CNAME 文件（无后缀名）,用文本编辑器打开，在首行添加你的网站域名，如 http://xxxx.com，注意前面没 http://example.com 或者 xxx.example.com。

在域名解析提供商

以百度云为例：
- 先添加一个 CNAME，主机记录写 @，后面记录值写上你的 http://xxxx.github.io
- 再添加一个 CNAME，主机记录写 www，后面记录值也是 http://xxxx.github.io
- 这样别人用 www 和不用 www 都能访问你的网站（其实 www 的方式，会先解析成 http://xxxx.github.io，然后根据 CNAME 再变成http://xxx.com，中间是经过一次转换的）。

11.参考资料

https://github.com/ds19991999/ds19991999.github.com/blob/master/README.md
http://gitbook.cn/m/mazi/article/5af260fd6f98784056d381ce
http://beiyuu.com/github-pages
https://chrisniael.gitbooks.io/gitbook-documentation/content/index.html

License

GNU General Public License v3.0

D介子
关注
专栏目录
My_GitHub_Pages:GitHub Pages个人主页
03-22
【GitHub Pages个人主页】是GitHub提供的一项服务，允许用户在GitHub上托管静态网页，用于展示个人信息、项目介绍或博客等内容。这项服务对于开发者来说尤其有用，因为它提供了免费的域名和托管，无需额外的服务器...
使用内网云+GitHub Pages免费部署动态网站
nnKevi的博客
01-31 5171
相信很多人都想搭建网站吧。但是，搭建网站不光得自己访问，还能让别人也能访问。但是我们家里的设备一般深处内网，无法实现外网访问。于是，很多人会在网上找各种各样的“内网穿透”软件，并尝试，但是没有一个能如愿。我也是一样的，接下来，我给大家分享一下我失败的尝试。
github page建立动态网站
热门推荐
dongzhuo的专栏
03-01 1万+
github的大名相信所有的码农都知道，github提供了一个pages功能，让你可以用来免费建立个人网站且免流量，免服务器，在这个物欲横流的世界简直是一股清流，只可惜她是静态的只能展示信息。作为码农我们不能巴巴的看她静静的躺在哪儿，那怎么才能和她动起来呢? 一翻苦斗后找到了答案，就是三层架构 数据库--------API----------网页 看到这里很多码农都已经明白了，只是加...
全网最详细的GitHub Pages上部署项目
共同进步
07-23 936
无需购买服务器或进行复杂的配置，只需将静态文件推送到特定的分支，GitHub Pages就会自动为你托管网站。如果你的项目需要构建（例如使用 React、Vue 或 Angular），请确保已经构建好，并且所有构建输出文件在一个目录中（例如。如果你的项目是一个单页应用（SPA），你可能需要使用打包工具（如Webpack、Vite等）来构建项目。通过这些步骤，你可以轻松地在 GitHub Pages 上部署你的静态网站或项目。GitHub Pages 会自动生成一个 URL，你可以在上面访问你的项目。
【解决】Github Pages搭建的网页访问加载缓慢
EliasChang的博客
03-17 2087
解决Github Pages搭建网站访问速度缓慢问题
Github Page 个人主页——项目部署
Otm-Z Blog
05-14 2192
一种基于 Github Page 服务搭建个人静态网站的方法
利用github-pages建立个人博客
GarfieldEr007的专栏
12-08 7054
前言 Github很好的将代码和社区联系在了一起，于是发生了很多有趣的事情，世界也因为他美好了一点点。Github作为现在最流行的代码仓库，已经得到很多大公司和项目的青睐，比如jQuery、Twitter等。为使项目更方便的被人理解，介绍页面少不了，甚至会需要完整的文档站，Github替你想到了这一点，他提供了Github Pages的服务，不仅可以方便的为项目建立介绍站点，也可以用来建立个人博
flyingwzb.github.io:利用GitHubPages快速搭建个人博客
05-24
博客的搭建教程修改自 更为详细的教程戳这 或 使用 开始 组件 侧边栏 迷你关于我 推荐标签 好友链接 HTML5 演示文档布局 网站统计与打赏 评论 网站分析 统计网站PV与UV JS实现文章打赏功能 高级部分 自定义 标题底...
利用Github_Pages快速部署一个专属自己的chatGPT聊天页面。_chatgpt-anywhere.zip
最新发布
08-26
利用Github_Pages快速部署一个专属自己的chatGPT聊天页面。_chatgpt-anywhere
Github Pages 搭建个人博客
08-02
知识点一：Github简介 Github是一个代码托管平台，它将代码与社区紧密联系起来，使得很多有趣的项目得以发生。Github是最流行的代码仓库之一...以上就是使用Github Pages搭建个人博客的相关知识点。希望对您有所帮助。
github_pages_demo
02-22
github_pages_demo
如何为Github Pages设置动态的背景图片？
Heartsuit的博客
08-16 2769
准备做什么？使用必应词典时，一次无意的点击，跳到了必应搜索引擎界面，突然眼前一亮，我看到一张图片，没错，高清大图！还可以往前翻几页，有的图片非常震撼；更有意思的是，在必应搜索首页，每张图片的背后都会有一个故事。然而，我对大部分故事并无兴趣。我只想把图片搞过来。。其实，必应已经提供了一个下载按钮的，可以一张一张下载，可我，只要链接~ 实际上，我的目标是把这些漂亮的图片设置为博客背景，那怎么做呢？
【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages，打造个人博客网站，展示个人简历、项目、文档或想要与世界共享的任何其他内容
Xminyang的博客
06-11 5817
【Github Pages使用教程】从头开始搭建自己的Github Pages，打造个人博客网站，展示个人简历、项目、文档或想要与世界共享的任何其他内容 GitHub Pages：Websites for you and your projects. GitHub Pages 允许您将 GitHub 仓库转换为网站，展示您的简历、项目、文档或您想要与世界共享的任何其他内容。这里有创建github.io的教程，会使用git命令来上传文件至GitHub仓库，相对较为复杂些。......
整合MyBatis - 使用generatorConfig生成mapper以及pojo
q16974058的博客
04-07 393
面试是跳槽涨薪最直接有效的方式，马上金九银十来了，各位做好面试造飞机，工作拧螺丝的准备了吗？掌握了这些知识点，面试时在候选人中又可以夺目不少，暴击9999点。机会都是留给有准备的人，只有充足的准备，才可能让自己可以在候选人中脱颖而出。《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门即可获取！” />面试是跳槽涨薪最直接有效的方式，马上金九银十来了，各位做好面试造飞机，工作拧螺丝的准备了吗？掌握了这些知识点，面试时在候选人中又可以夺目不少，暴击9999点。
打造完美写作系统：Gitbook+Github Pages+Github Actions
悲伤无声地涌出来
11-24 4432
最开始的灵感来源为使用 travis + gitbook + github pages 优雅地发布自己的书[^1]，后来在学习的过程中发现Github Actions和Github结合的更加密切，因此将Travis CI替换成了Github Actions，并在原文的基础上进行了一系列优化。
如何在Github Pages搭建自己写的页面？
light
07-06 485
最近发现 github 改版了，已没有像原来的 Launch automatic page generator 这样的按钮。文中所有过程可能在不同的情况下会有少数不同,但基本如此，大家可根据自己的情况亲自测试。现在将全部过程方法分享给大家，如有错误望指出。本文参考自http://www.cnblogs.com/lijiayi/p/githubpages.html开始教程之前的准备工作： 1、需要
超 Nice 的评论组件 —— Gitalk
超Ren专属
08-29 1928
专属目录超 Nice 的评论组件引言Gitalk特性安装链接方式安装npm 方式安装如何使用方式一方式二选件注意效果总结 超 Nice 的评论组件 引言 最近在做一个基于 Java 的个人博客系统，现已基本完工，突然发现怎么没有评论这可如何是好，没有评论就如没有灵魂一样，可是如果再从头从数据库开始写的话，花费的代价有点大，于是我就在网上寻找一款适合我的博客的评论插件，第一次找到Disqus，可由于Disqus有墙的原因，迫使我放弃了，之后我又找到了“ 畅言云评 ”，结果很令人失望，因要使用畅言云评的话，网站
搭建评论系统，Gittalk插件踩坑指南｜玩转GitHub Pages三部曲（三）
Daniel的博客
02-23 1201
本文详细讲解了如何利用 Gittalk 为你的博客或者 GitHub Pages 快速增加评论插件，并且详细讲解了其中可能遇到的问题，非常易于上手！点击上方“后端开发技术”，选择“设为星标” ，优质资源及时送达使用GitHub Page 或者 Gitee Page搭建好静态网页博客之后，只有文章没有互动会显得很枯燥，但是需要评论功能就需要去撸业务代码，这样的成本未免太高。（如何搭建Pages请查看...
Github | 搭建个人git page不完全记录
MissMango0820的博客
12-13 1642
搭建个人git page不完全记录。
github pages搭建个人博客
08-13
要使用GitHub Pages搭建个人博客，你可以按照以下步骤进行操作： 1. 在GitHub上创建一个新的仓库，命名为"<your-username>.github.io"。确保将"<your-username>"替换为你的实际GitHub用户名。 2. 使用Git将该仓库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值