文档章节

用github搭建博客

leolan
 leolan
发布于 2016/10/24 23:03
字数 4148
阅读 19
收藏 0
用github搭建blog
个人学习整理的笔记,自己没有截图了,大部分是盗图。@_ @~
法一:
Jekyll Ruby写的,jekyll是把原文上传github,可以直接生成博客,也可以用在线编辑器处理。
  1. 搭建ruby环境,详见:http://blog.csdn.net/lan842632/article/details/52859119
  2. 安装kramdown
gem install kramdown
  1. 安装rouge
gem install rouge
安装ruby工具集管理工具Bundler
gem install bundler
安装jekyll (在linux或Windows中)
Mac: mkdir -p /usr/local/Cellar/ruby/bin
sudo gem install jekyll -n /usr/local/Cellar/ruby/bin
关闭终端窗口再打开,输入jekyll看这个指令是否存在,如果提示不存在,那就再修改/Users/LeoLan/.bash_profile文件,把Jekyll的路径写进去。
export PATH=/usr/local/Cellar/ruby/bin:$PATH
再重新打开终端,这时候Jekyll指令应该ok了。
whereis gem 可以看到路径是/usr/bin/gem,当前的gem路径是系统默认的gem版本,这个版本用了是会报错的,用这个版本安装Jekyll默认安装Jekyll到相同目录下,所以同样会出现permission denied的报错信息。有人说可以用symlink,但即使用了sudo也会是permission denied的报错。所以直接安装Jekyll并同时指定安装路径了】
1
2
3
4
gem install jekyll
jekyll new my-awesome-site    #创建新站点
cd my-awesome-site      #进入站点目录下一步才能开启服务
jekyll serve --watch    #加--watch参数修改后会自动刷新页面,而不用手动重启jekyll
这样就能在本地搭建一个简单的服务器,然后访问localhost:4000就能看到blog的页面了。
一个基本的 Jekyll 网站的目录结构一般是像这样的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
| └── members.yml
├── _site
└── index.html

对应的用途如下:
目录 描述
_config.yml 保存配置数据。很多配置选项都会直接从命令行中进行设置,但是如果你把那些配置写在这儿,你就不用非要去记住那些命令了。
_drafts drafts 是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。
_includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {\% include file.ext \%} 来把文件 _includes/file.ext 包含进来。
_layouts layouts 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。
_posts 这里放的就是你的文章了。文件格式很重要,必须要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制,但是数据和标记语言都是根据文件名来确定的。
_site 一旦 Jekyll 完成转换,就会将生成的页面放在这里(默认)。最好将这个目录放进你的 .gitignore 文件中。
index.html 如果这些文件中包含 YAML 头信息 部分,Jekyll 就会自动将它们进行转换。当然,其他的如 .html, .markdown, .md,或者 .textile 等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。
Other Files/Folders 其他一些未被提及的目录和文件如 css 还有 images 文件夹, favicon.ico 等文件都将被完全拷贝到生成的 site 中。
安装完成后,如果你要配置你自己的站点信息,那么你就要修改 _config.yml 这个文件。里面可以配置站点名称,描述,多说,统计,友链等等。参考: http://pwnny.cn/original/2016/06/26/MakeBlog.html中的 Jekyll目录结构解读

使用Hux主题
默认的主题不是很喜欢?客官可以在 http://jekyllthemes.org/ 这个上面找找,个人觉得 Hux 这个主题还是不错的,喜欢的直接下载,重新修改里面配置就能为自己所用了。
关于配置文件里面多说的duoshuo_username是什么,在多说创建站点的时候,这个框框里面填的就是你的duoshuo_username:
配置完在本地预览没有问题了,就可以直接把代码上传到github,然后访问yourusername.github.io就能看到你刚刚创建的blog了。

用Github Pages生成个人博客
#Github Pages生成网站的两种方式的基本原理
方式一:
一个Github账号对应一个用户或者一个组织,Github会给这个用户分配一个域名:  username.github.io
在Github上有一个账号,名为  username  (任意),有一个项目,名为  username.github.io  (固定格式,username与账号名一致),项目分支名为  master  (默认固定),这个分支有类似下面的目录结构:
这样,当你访问  http://username.github.io/  时,Github会使用Jekyll解析用户  username  名下的  username.github.io  项目中,分支为  master   的源代码,为你构建一个静态网站,并将生成的index.html 展示给你。
方式二:
Github还为每个项目提供了域名,例如你的项目名为  blog  ,Github会为这个项目提供一个  username.github.io/blog  的域名
在Github上有一个账号,名为  username  (任意),有一个项目,名为  project  (任意),项目分支名为  gh-pages  (固定),这个分支也有上面那种结构。
那么当你访问  http://username.github.io/project  时,Github会去解析  username  用户下, project  项目的  gh-pages  分支下的源代码,为你构建网站。

所以要搭建自己的博客你有两种选择:
  • 建立名为 username.github.io 的项目,在 master 分支下存放网站源代码
  • 建立名为 blog 的项目,在 gh-pages 分支下存放网站源代码
接下来我们用第二种方式搭建博客

> 创建个人仓库
因为我们使用第二种方式创建,所以仓库的名称可以随意取。在这以Test01为名字。
在Repossitory name处填入Test01,选择Public类型,然后点击下面的Create respository按钮:
> 为仓库创建Github Pages
点击Settings设置:
翻到下面,选择Launch automatic page generator:
再接着编译一下内容,选择页面上的元素,再点Continue to layouts:
选好模板,点击Publish page,就生成了Github Pages:
并且,分支自动设置为了gh-pages:
让我们打开这个网站看看效果吧!在浏览器输入:  http://zyc8904.github.io/Test01  (zyc8904换成你的github名称,Test01换成项目名):
可能有人会问,地址栏怎么和我输入的网址不一样。这是因为我把域名绑定到了我的github上, zyc8904.github.io  被自动指向为我的域名,不要着急,后面我会教大家如何绑定域名
> 将本地Jekyll代码部署到Gihub仓库
我们的目的就是在本地利用Jekyll搭建好博客,并且测试开发,写文章,然后推送到Github仓库里,发布到线上。前面已经教大家搭建好了本地Jekyll,接下来就教大家把它推送到Github仓库中。
> 把仓库克隆到本地
这里我以windows下的Git客户端: Github for windows  为例来为大家讲解(如果想用Git Bash命令行克隆,请移步 这里
首先打开我们的Github for windows客户端,点击左侧的  +  号按钮:
选择 Clone ,并且找到刚才新建的 Test01 仓库,然后点击最下方的 Clone 按钮:
然后选择存放位置,这里我放到D盘,然后点击确定:
这样我们的Test01就被克隆到了本地。打开D盘可以看见这个文件夹。这时我们启动Jekyll服务,别忘了 进入Test01目录 下:
cd d:\Test01jekyll serve --watch
现在我们打开[http://localhost:4000],就可以看见我们在Github上创建的Pages页面了。
> 拷贝本地Jekyll目录到版本库中
删除Test01下的示例文件和文件夹: _site  、 stylesheets  、 index.html  、 params.json
再把本地Jekyll创建的blog里的所有文件和文件夹全都拷贝到Test01里面。
如果你前面和我用的是一样的命令的话
jekyll serve --watch
这时你可能会发现cmd命令行中,自动处理了一些操作并且显示:
这就是我加 --watch  的原因,不用再自己去生成,Jekyll服务器检测到你有变化会自动再生成页面,这时你在刷新浏览器,那么就会看到Github页面就会被Jekyll生成的页面代替了:
我们进入_post目录,撰写的markdown语法的博文都放在这里。默认会有一篇测试文章:2016-03-04-welcome-to-jekyll.markdown. 拷贝测试博文
cp 2016-03-04-welcome-to-jekyll. markdown 2016-03-04-test. markdown
然后刷新一下浏览器、发现页面并没有变化.因为我们还没有通过Jekyll build去生成。
jekyll build
默认情况下,服务会以前台的方式挂起,如果希望用后台进程运行服务,我们可以使用  --detach 参数,缩写参数为 -B (应该是Background的首字母)
jekyll serve build -- detach
或者
jekyll serve build - B
值得注意的是:如果用vagrant虚拟机去安装jekyll,那么启动服务时还需要加上-H参数,指定访问主机号为0.0.0.0,即 jekyll serve build -B -H 0.0.0.0 ,否则vagrant下可能启动失败
再查看首页,发现已经有两篇文章了!因为没有更改标题,所以都是一样的。
打开复制的 2016-03-04-test.markdown-test.markdown,可以看见开头有如下几个东东。
--- layout: post title: "Welcome to Jekyll!" date: 2016 - 03 - 04 10 : 52 : 19 + 0100 categories: jekyll update ---
layout 表示使用的是post布局, title 是文章标题, date 是自动生成的日期, categories 是该文章生成html文件后存放的目录,可以去_site/jekyll/update下找到对应日期下面的html文档。当然你也可以只设置jekyll单一的目录,甚至是更多级别的目录,用空格分开即可。头信息设置完成后就可以书写正文了。
如果每次都输入这些头信息,还要去整理格式,那么一定很烦躁,这种重复性的东西我们就把它自动化,通过Rakefile去解决,它类似shell这样的脚本,可以使用交互模式。以下是我的Rakefile,可以复制后命名为Rakefile,放在站点根目录直接使用,也可以修改为适合自己的Rakefile:
task :default => :new require 'fileutils' desc "创建新 post" task :new do puts "请输入要创建的 post URL:" @url = STDIN . gets . chomp puts "请输入 post 标题:" @name = STDIN . gets . chomp puts "请输入 post 子标题:" @subtitle = STDIN . gets . chomp puts "请输入 post 分类,以空格分隔:" @categories = STDIN . gets . chomp puts "请输入 post 标签:" @tag = STDIN . gets . chomp @slug = " #{ @url } " @slug = @slug . downcase . strip . gsub ( ' ' , '-' ) @date = Time . now . strftime ( "%F" ) @post_name = "_posts/ #{ @date } - #{ @slug } .md" if File . exist? ( @post_name ) abort ( "文件名已经存在!创建失败" ) end FileUtils . touch ( @post_name ) open ( @post_name , 'a' ) do | file | file. puts "---" file. puts "layout: post" file. puts "title: #{ @name } " file. puts "subtitle: #{ @subtitle } " file. puts "author: pizida" file. puts "date: #{ Time .now} " file. puts "categories: #{ @categories } " file. puts "tag: #{ @tag } " file. puts "---" end exec "vi #{ @post_name } " end
如何使用Rake,输入一下命令:
rake new
rake会启动交互模式,让你依次输入title,subtitle,author,categories,tag等信息,并为你创建好具有头信息的markdown文件。如下一样:
请输入要创建的 post URL:testurl请输入 post 标题:testpost请输入 post 子标题:subtitle 请输入 post 分类,以空格分隔:jekyll请输入 post 标签:技术
我们查看 _post 目录,发现已经有一篇 2016-03-05-testurl.md 文章,打开看下
--- layout: post title: testpost subtitle: subtitle author: pizida date: 2016 - 03 - 05 07 : 31 : 27 + 0800 categories: jekyll tag: 技术 ---
已经为我们创建好头信息了。


> 部署本地Jekyll站点到Github Pages上
打开Github for windows客户端,会看到  changes  上面有个点,说明他已经检测到我们的仓库的变化,并且自动把变化都列举在了下面:
这时我们在下方填入这次改变的名称和描述,点击Commit to gh-pages。然后再点击右上角的Sync把这次改变push到Github远程仓库里:
稍等几分钟,我们再次访问  http://zyc8904.github.io/Test01  就可以看见我们用Jekyll做的站点已经被部署到github上了:
以后你只要在本地 Test01 文件夹下的 _posts 文件夹里写文章,然后推送到远程仓库就可以了。
以后写博客的思路大致就是这样:
#本地开发测试
  1. 用markdown写文章,并按规定名称格式保存在_posts里。
  2. jekyll serve –watch 启动服务器,在浏览器里查看。
#推送远程仓库
  1. 用git客户端推送到远程仓库里。
  2. 通过域名访问。

法二:
hexo node-js写的,hexo生成静态页面的速度要比较快,hexo是本地生成html再上传。
安装hexo
1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
通过上面简单的操作之后,就能找本地生成一个blog的目录,和jekyll一样也是通过 _config.yml 文件来配置站点信息的。
默认的目录结构如下:
1
2
3
4
5
6
7
8
9
10
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
目录 描述
.deploy 执行hexo deploy命令部署到GitHub上的内容目录
public 执行hexo generate命令,输出的静态网页内容目录
scaffolds layout模板文件目录,其中的md文件可以添加编辑
scripts 扩展脚本目录,这里可以自定义一些javascript脚本
source 文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
_drafts 草稿文章
_posts 发布文章
themes 主题文件目录
_config.yml 全局配置文件,大多数的设置都在这里
package.json 应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
hexo常用的几个命令:
1
2
3
4
5
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
如果你的文章是从jekyll转过来的,要修改 _config.yml 里面的 permalink: :year/:month/:day/:title/
Next主题
hexo也有很多的主题,这里说一下 Next http://theme-next.iissnan.com/ 这个主题:
安装最新版:
1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
修改站点配置文件_config.yml:
1 theme: next
Next 里面有关于这个主题的配置,大家自己试试。
安装插件
hexo支持插件,可以直接通过命令行安装即可:
1
2
3
4
5
npm install plugin-name --save
//更新插件
npm update
//卸载插件
npm uninstall plugin-name
下面推荐几个常用的插件:
1
2
3
4
5
6
//feed插件
npm install hexo-generator-feed --save
//站点地图
npm install hexo-generator-sitemap --save
//百度站点地图
npm install hexo-generator-baidu-sitemap --save
SEO优化
更改index.swig文件,文件路径是your-hexo-site\themes\next\layout,将下面代码:
1 {% block title %} {{ config.title }} {% endblock %}
改成
1 {% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}
按照 Next进阶设定 使用cdn加速js和css,还有google font。
百度站长 提交网站和网站地图。
同时使用coding和github
国内的 gitcafe 也提供了相应的服务,当然现在已经卖给了 Coding
所以我们可以同时使用Coding提供的Pages服务和Github提供的Pages服务。
只需要在配置文件中配置一下 deploy 就可以了:
1
2
3
4
5
deploy:
type: git
repo:
github: https://github.com/xxxxxx
coding: https://git.coding.net/xxxxxx,coding-pages
先要安装deployer-git
1 npm install hexo-deployer-git --save
国内国外访问不同的Pages服务
同时使用了coding和github之后,由于github访问速度可能有点慢,可以通过DnsPod让国内用户访问coding,让国外用户访问github。
好了,基本介绍的也差不多了。


为你的Github绑定域名
1· 我们的域名只能替换  username.github.io  ,所以你需要按照前面的方式一自己建一个仓库,创建好Github Pages,然后克隆到本地。在本地的 username.github.io  文件夹下新建一个CNAME文件,注意没有后缀名。在里面添加你的域名,如我的就是  pwnny.cn ,然后推送CNAME文件到远程仓库。
2· 到域名服务商那里增加你的CNAME记录。添加两条记录,@和www的主机记录,记录类型为CNAME,记录值为  username.github.io  ,重要的是  io  后面还有一个原点,切记。
过几分钟,刷新博客,就能直接用域名访问了。







个人学习笔记,不当之处还请指正。
----------不定期更新------------







本文转载自:http://blog.csdn.net/lan842632/article/details/52846689

共有 人打赏支持
leolan
粉丝 1
博文 43
码字总数 74
作品 0
梅州
使用GitHub Pages搭建博客

使用GitHub Pages搭建博客 14 Jan 2015 新的一年开始,一定要做点美好的事情。GitHub 是一个开源项目的托管网站,相信很多人都听过。在上面有很多高质量的项目代码,我们也可以把自己的项目代...

新年
2015/08/31
3K
0
使用GitHub pages 搭建一个心仪的个人博客

(一)前言: 建议:慢慢看,也就这一篇用心了点写 说来话长,一把辛酸泪,可算是弄好了。 1 起因:在很早很早,大一的时候,估计快记不得日子了,那时候来到PC吧创业团队,一个大一级的学长通...

徐代龙
2017/12/09
0
0
记录第一次搭建hexo

title: 记录第一次搭建hexo date: 2016-11-22 14:57:37 type: "hexo" tags: - 搭建hexo 即使扒了很多大佬的搭建教程,还是踩了很多坑,所以打算记录下来自己的搭建过程。本文主要介绍win10下...

黑天很黑
2016/11/22
0
0
github 绑定域名

git page可以用来托管静态资源,所以用来搭建一个自己的博客再合适不过。今天注册了一个域名,忽然想到可以把之前在git page上搭建的博客绑定一下域名,方便访问。 关于如何搭建博客本文不予...

两天三顿
2017/04/11
0
0
github+hexo搭建博客

引言 之前用阿里云弹性web托管采用wordpress搭建的个人博客,经过我使用一段时间之后发现存在很多问题: 网站的响应速度非常慢,估计打开主页需要3-4s的时间,我经过搜索发现很多人都有这样的...

lyrichu
05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python中cv2模块imread函数

导入 >> import cv2>> import numpy as np 读图片 >> image_arr = cv2.imread('file_path') 灰度图扩展成彩色图 可以通过图片的channel判断是否是灰度图。如果需要可以将灰度图扩展到RGB......

温子寒
3分钟前
0
0
利用剪切板JS API优化输入框的粘贴体验

直接复制记录下 /**@description 表单输入框粘贴体验优化,出处https://www.zhangxinxu.com/wordpress/?p=8003@author zhangxinxu*/// 遍历所有的输入框[].slice.call(document.qu...

红羊在厦门
11分钟前
0
0
awk复习

10月22日任务 复习 awk调用外部变量 -v参数设置内部变量调用外部变量 [root@castiel-Lu awk]# a=44[root@castiel-Lu awk]# echo "ABCD" | awk -v GET_A=$a '{print GET_A}'44 更复杂的...

robertt15
16分钟前
0
0
2018CTF大赛学习

1.C伪随机数,可预测,可用来做加密解密,如 int main() { // This program will create same sequence of // random numbers on every program run for(int i = 0; ......

simpower
25分钟前
0
0
XamarinEssentials教程移除键值首选项的键值

XamarinEssentials教程移除键值首选项的键值 如果开发者不再使用首选项中的某一项时,可以将该项移除掉。此时可以使用Preferences类的Remove()方法,该方法可以将存在于首选项中的指定键以及...

大学霸
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部