[原]通过GitHub Pages建立个人站点(详细步骤)

2023-10-26

1 Git简介

2 为什么使用Github Pages

3 创建Github Pages

3.1 安装git工具.

3.2 两种pages模式

3.3 创建步骤

3.4 常用命令

4 使用Jekyll搭建博客

4.1 什么是jekyll

4.2 jekyll本地环境搭建

4.3 jekyll目录结构

4.4 Jekyll-Bootstrap创建博客

4.5 Jekyll 写博过程

4.6 个性化博客

5 使用Markdown

5.1 简介

5.2 基本语法

5.3 Notepad++支持Markdown语法高亮

1 Git简介

Git是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。

GitHub可以托管各种git库的站点。

GitHub Pages免费的静态站点,三个特点:免费托管、自带主题、支持自制页面和Jekyll。

2 为什么使用Github Pages

1. 搭建简单而且免费;

2. 支持静态脚本;

3. 可以绑定你的域名;

4. DIY自由发挥,动手实践一些有意思的东西git,markdown,bootstrap,jekyll;

5. 理想写博环境,git+github+markdown+jekyll;

3 创建Github Pages

3.1 安装git工具

http://windows.github.com/

http://mac.github.com/

3.2 两种pages模式

1. User/Organization Pages 个人或公司站点

1) 使用自己的用户名,每个用户名下面只能建立一个;

2) 资源命名必须符合这样的规则username/username.github.com;

3) 主干上内容被用来构建和发布页面

2. Project Pages 项目站点

1) gh-pages分支用于构建和发布;

2) 如果user/org pages使用了独立域名,那么托管在账户下的所有project pages将使用相同的域名进行重定向,除非project pages使用了自己的独立域名;

3) 如果没有使用独立域名,project pages将通过子路径的形式提供服务username.github.com/projectname;

4) 自定义404页面只能在独立域名下使用,否则会使用User Pages 404;

5) 创建项目站点步骤:

$ git clone https://github.com/USERNAME/PROJECT.git PROJECT

$ git checkout --orphan gh-pages

$ git rm -rf .

$ git add .

$ git commit -a -m "First pages commit"

$ git push origin gh-pages

3. 可以通过User/Organization Pages建立主站,而通过Project Pages挂载二级应用页面。

3.3 创建步骤

第一步:创建个人站点

第二步:设置站点主题

进入资源-setting

 更新你的站点

 

 选择主题并发布

3.4 常用命令

$ git clone git@github.com:username/username.github.com.git //本地如果无远程代码,先做这步,不然就忽略

$ cd .ssh/username.github.com //定位到你blog的目录下

$ git pull origin master //先同步远程文件,后面的参数会自动连接你远程的文件

$ git status //查看本地自己修改了多少文件

$ git add . //添加远程不存在的git文件

$ git commit * -m "what I want told to someone"

$ git push origin master //更新到远程服务器上

4 使用Jekyll搭建博客

4.1 什么是jekyll

Jekyll是一种简单的、适用于博客的、静态网站生成引擎。它使用一个模板目录作为网站布局的基础框架,支持Markdown、Textile等标记语言的解析,提供了模板、变量、插件等功能,最终生成一个完整的静态Web站点。说白了就是,只要安装Jekyll的规范和结构,不用写html,就可以生成网站。[jekyll介绍][jekyll on github][jekyllbootstrap]。

Jekyll使用Liquid模板语言,{{page.title}}表示文章标题,{{content}}表示文章内容。我们可以用两种Liquid标记语言:输出标记(output markup)和标签标记 (tag markup)。输出标记会输出文本(如果被引用的变量存在),而标签标记不会。输出标记是用双花括号分隔,而标签标记是用花括号-百分号对分隔。[Liquid模板语言] [Liquid模板变量参考]。

jekyll与github的关系:GitHub Pages一个由 GitHub 提供的用于托管项目主页或博客的服务,jekyll是后台所运行的引擎。

4.2 jekyll本地环境搭建

1. 下载最新的RubyInstaller并安装(我下载的是rubyinstaller-1.9.3-p194.exe),设置环境变量,path中配置C:\Ruby193\bin目录,然后在命令行终端下输入gem update --system来升级gem;

2. 下载最新的DevKit,DevKit是windows平台下编译和使用本地C/C++扩展包的工具。它就是用来模拟Linux平台下的make,gcc,sh来进行编译。但是这个方法目前仅支持通过RubyInstaller安装的Ruby,并双击运行解压到C:\DevKit。然后打开终端cmd,输入下列命令进行安装:

cd C:\DevKit

ruby dk.rb init

ruby dk.rb install

3. 完成上面的准备就可以安装Jekyll了,因为Jekyll是用Ruby编写的,最好的安装方式是通过RubyGems(gem):

gem install Jekyll

并使用命令检验是否安装成功

jekyll --version

4. 安装Rdiscount,这个用来解析Markdown标记的包,使用如下命令:

gem install rdiscount

5. 运行本地工程:

cd 到工程目录,启动服务:

jekyll --server

4.3 jekyll目录结构

  •  _posts: _posts中的数据文档,通过注入_layouts定义的模板,通过jekyll --server最终生成的静态页面在_sites目录。目录是用来存放你的文章的,一般以日期的形式书写标题。
  •  _layouts:_layouts中的模板一般指向了_includes/themes中的模板。目录是用来存放模板的,在这里你可以定义页面中不同的头部和底部。
  •  _includes

1) _includes/JB中有一些常用的工具,用于列表显示、评论等;

2) _includes/themes中可参看主题的相关html文档。

3) _includes/themes中的主题一般包含default.html、post.html和page.html三个文档。default.html定义了网站的最上层框架(模板),post.html和page.html是其子框架(模板)。

4) 生成好的html子页面通过default.html的{{ content }}变量调用,生成整个页面。

  •  assets 渲染页面的CSS和JS文档在assets/themes中
  •  _config.yml 站点生成需要用到_config.yml配置文件,站点的全局变量在_config.yml中定义,用site.访问;页面的变量在YAML Front Matter中定义,用page.访问,更多的模板变量可参考模板数据。
  •  index.html是你的页面首页。

4.4 Jekyll-Bootstrap创建博客

1. 创建个人站点,即创建一个新资源,格式为username.github.com;

2. 安装Jekyll-Bootstrap:

$ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com

$ cd USERNAME.github.com

$ git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git

$ git push origin master

3. 访问创建好的个人站点:username.github.com

4. 在本地测试查看效果:

cd USERNAME.github.com

jekyll --server

4.5 Jekyll 写博过程

1、 配置_config.yml:

1) 修改标题:title : My Blog =)

2) 修改个人信息

author :

name : Name Lastname

email : blah@email.test

github : username

twitter : username

feedburner : feedname

3) 引用:_config.yml中的键值均引用到其他页面{{ site.title }};

2、 写文章

按照_config.yml的格式permalink: /:categories/:year/:month/:day/:title,可以修改格式,创建markdown格式文件,就可以当初博客发布了。

3、 发布

本地预览修改:运行jekyll –server,预览http:127.0.0.1:4000。

发布到github上:通过命令提交或者客户端提交。

4.6 个性化博客

Github Page完成了博客的主要功能,写作、发布、修改,这些都是相对静态的东西,就是你自己可以控制的事情,还有一些动态的东西Github Pages无法支持,比如说文章浏览次数、文章的评论等,还有一些个性化的东西,像个性化页头页尾、代码高亮可以把博客整的更漂亮一点,其实这写都可以通过第三方应用来实现,个性化自己的博客。

加上Disqus云评论:

注册http://disqus.com/

修改_config.yml:

comments :

provider : disqus

disqus :

short_name : tiansj

5 使用Markdown

5.1 简介

Markdown 的宗旨是实现「易读易写」。可读性,无论如何,都是最重要的。

Markdown 的语法全由一些符号所组成,这些符号经过精挑细选,其作用一目了然。格式撰写的文件可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。

资料:[搭建环境]

5.2 基本语法

  • 使用一个或多个空行分隔内容段来生成段落 <p>。
  • 标题(h1~h6)格式为使用相应个数的“#”作前缀,比如以下代码表示 h3:

### this is a level-3 header ###

  • 使用“>”作为段落前缀来标识引用文字段落。这其实是 email 中标记引用文字的标准方式:

> 引用的内容

> 这个记号直接借鉴的邮件标准

  • 使用“*”“+”“-”来表示无序列表;使用数字加“.”表示有序列表。如:

1. I am ordered list item 1...

2. So I should be item 2!?

  • 使用 4 个以上 空格或 1 个以上 的 tab 来标记代码段落,它们将被<pre> 和 <code> 包裹,这意味着代码段内的字体会是 monospace家族的,并且特殊符号不会被转义。
  • 使用 [test](http://example.net "optional title") 来标记普通链接。
  • 使用 ![img](http://example.net/img.png "optional title") 来标记图片。

引号内的 title 文字是可选的,链接也可以使用相对路径。

  • 使用 * 或 _ 包裹文本产生 strong 效果:

_语气很重的文本_ 以及 **语气更重的文本**

5.3 Notepad++支持Markdown语法高亮

1. 下载userDefineLang.xml

2. 将 userDefineLang.xml 放置到此目录:C:\Users\Administrator\AppData\Roaming\Notepad++

3. 重启 Notepad++,在语言菜单下可以看到自定义的 Markdown 高亮规则

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[原]通过GitHub Pages建立个人站点(详细步骤) 的相关文章

  • 验证错误消息中不包含字段名称

    如果我有以下验证 validates inclusion of dob in gt Date new 1900 Time now years ago 18 to date message gt You must be 18 or older
  • 为什么我的 git 预提交钩子不修剪行尾的空白?

    我在 Mac Mojave 上 我在 git templates hooks pre commit 创建了一个文件 我想删除我正在提交的文件行尾的空格 我希望这种情况在全球范围内发生在我的所有项目中 A git hook script to
  • Git 注释详细信息

    我读了this http git scm com 2010 08 25 notes html and this https github com blog 707 git notes display但仍然认为它们晦涩难懂 目前为止了解到 创
  • 为什么 ssh-agent 需要 root 访问权限?

    我刚刚安装了 Archbang 并尝试克隆我的 Git 项目 这需要 SSH 密钥 过去 我在 Ubuntu 和 RedHat 机器上遵循 Github 指南取得了成功 但由于某种原因 它在我的新 Arch 安装上不起作用 我已使用以下命令
  • git rebase 开发分支

    抱歉 只是另一个 变基 问题 但我对此感到困惑 我有时会将开发分支上的提交推送到远程 原始 现在 关于 rebase 总是提到的一件事是 如果您推送了更改 则永远不要 rebase 这意味着 我永远无法重新调整我的开发分支 只能合并它 在功
  • 选择预先选择多个值的标签 - 在数据库中手动插入的值

    我需要在 select tag 中预先选择多个值 但我在空缺表中 手动 添加空缺 如下所示 我的控制器 def create hr curriculum generic HrCurriculumGeneric new params hr c
  • 如何使用 WEBrick 执行 Ruby 代码而不是将代码转储到浏览器?

    当我在浏览器中运行程序时遇到问题WEBrick服务器 http ruby doc org stdlib 2 1 1 libdoc webrick rdoc WEBrick html 它显示了 2loop rb 文件中编写的代码 当我跑步时r
  • 如何为特定存储库配置 AWS CodeCommit 配置文件

    我有以下问题 作为我工作的一部分 我处理多个 AWS 账户 每个账户都有一个单独的 AWS CodeCommit 存储库和特定于账户的 IAM 用户 这会导致不同的用户 ID 我想找到一种方法来配置我的 ssh 以根据存储库访问不同的帐户
  • Jenkins Git 参数插件无法获取标签

    詹金斯版本 1 593 Git 参数插件 0 4 0 GIT 客户端插件 1 16 1 我使用私有 git 存储库 可以通过 ssh 访问 我的构建是参数化的 git参数是TAG TO BUILD 要构建的分支是refs tags TAG
  • Rails 渲染不必要的信息

    我一直在使用 RoR 和 Bootstrap 我试图将我的代码渲染成我在网上找到的片段 基本上我的索引中有这个 div class col md 6 div class well well sm div class row p p p p
  • 在 sorbet 中,你能指定一个类型是一个类的后代吗?

    我有一个方法返回一个对象 该对象可能是许多不同类型的对象之一 但它们都是同一祖先类的一部分 精确的对象类型是动态推断的 但是 我对签名中返回值的内容感到困惑 我在下面使用了一个占位符instance of来说明问题 sig params i
  • 截断浮点数而不向上舍入

    我有一个浮点数 我想将其截断为 3 位 但我不想向上舍入 例如 转换1 0155555555555555 to 1 015 not 1 016 我将如何在 Ruby 中做到这一点 您还可以转换为 BigDecimal 并对其调用 trunc
  • 如何触发并忘记子进程?

    我有一个长时间运行的进程 我需要它来启动另一个进程 该进程也会运行很长一段时间 我只需要开始它 然后就完全忘记它 我设法通过从 Ruby 编程 一书中获取一些代码来完成我需要的操作 但我想找到最好 正确的方法 并了解发生了什么 这是我最初得
  • 如何从现有的远程分支创建本地分支?

    我想从现有的远程分支 假设是远程 A 创建一个分支 然后将更改提交到存储库 我已使用以下命令从现有的远程 A 创建本地分支 git checkout remote A git branch master remote A 现在我已经使用以下
  • debugger-ruby_core_source gem 没有提供 ruby​​-2.0.0-p451 的源代码

    我在其他 SO 问题中看到了非常类似的问题 例如debugger ruby core source gem 没有提供 ruby 1 9 2 p321 的源代码 https stackoverflow com questions 204618
  • Git Grep 颜色选项解释和/或比较

    我正在尝试自定义我的 Git 颜色 读完后文档 https git scm com docs git config 我找到了我想要设置的选项 除了 Grep 之外 一切都工作正常 我意识到 我过去并没有真正使用过它 我想用相同的调色板为其设
  • main:Object 的未定义方法“命名空间”(NoMethodError) - 活动记录/rakefile

    我正在尝试运行一个基本的 Sinatra 应用程序 当我进入 机架 步骤时 出现错误 rvm gems ruby 2 2 1 gems activerecord 4 2 1 lib active record railties databa
  • 有没有办法从 UTF-8 编码的文件中删除 BOM?

    有没有办法从 UTF 8 编码的文件中删除 BOM 我知道我所有的 JSON 文件都是以 UTF 8 编码的 但是编辑 JSON 文件的数据录入人员将其保存为带 BOM 的 UTF 8 当我运行 Ruby 脚本来解析 JSON 时 它失败并
  • 使用 GIT_PS1_SHOWCOLORHINTS 自定义 __git_ps1 的颜色

    我尝试过的 我已更新我的提示以包含分支名称 git ps1 另外 我设置GIT PS1 SHOWCOLORHINTS 问题 提示正确显示 然而 树枝的颜色始终是绿色的 我预计肮脏的树枝会是红色的 文档指出 颜色基于 git status s
  • 设置 put 的行尾字符

    我有一系列想要打印的条目 Being arr数组 我只是用来写 puts arr 然后我需要使用DOS格式的行尾 r n 所以我写道 arr each e print e r n 这工作正常 但我想知道是否有一种方法可以指定要使用的行尾格式

随机推荐