Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1431|回复: 0

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

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-11 15:24:20 | 显示全部楼层 |阅读模式
    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 高亮规则
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-25 12:41 , Processed in 0.386015 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表