image
第一步 网站托管
我们晓得,一个网站要才能在任何地方都还能被访问,那么还要布署至服务器上。其实github就提供了这么的功能,只要依照github格式要求,新建一个库房,把你的网站代码上传至旁边,那么就可以在任何时侯任何地方都还能访问了,那么怎么搭建这个代码托管库房呢?
可参考官方链接,我这也把方法写下来。
1.首先你要至GitHub上注册一个帐户,例如我注册的用户名为:leach-chen(用户名可以在设置里改)
2.点击New repository–>输入库房名称格式为:用户名.github.io(如:leach-chen.github.io)->点击Create repository
image
image
3.浏览器里访问,可以发觉这个url可以被访问了,你可以把改库房拉取至本地,然后在上面改建一个index.html的文件,在里面键入任意内容,然后再把代码推送至git上,然后再访问改链接,可以发觉index.html上面的内容被访问至了。
到这儿,一个免费且无限流量的github代码托管库房就争创完成了。
第二步 Jekyll安装
首先解释下哪些是jekyll,jekyll相当于一个编译工具,安装好jekyll后,你可以通过jekyll争创一个网站模版,创建好以后,我们就可以通过:4000/访问昨天争创的网站了(具体jekyll用法上面再介绍),我们可以实时更改昨天争创的模版上面的内容,并可以实时通过本地url预览改动后的疗效。我们把这个博客推送至上一步争创的代码库房里,再通过就可以访问至博客上面的内容了。有了Jekyll,我们不用每天改动一点点就把代码推送至库房中进行预览,而是本地就可以预览。GitHub支持jekyll,hexo等时态解读。
那么怎么安装jekyll呢?我那边暂只讲解windows下的安装方法。
首先点击下载安装Ruby installer;
点击下载RubyGems,下载完成后解压到你想放的位置,例如我放在E:\Software\Install\StudySoftware\rubygems-2.7.4。 打开命令行执行:
cd E:\Software\Install\StudySoftware\rubygems-2.7.4 //踏入至解压包的位置
E:
ruby setup.rb
在命令行执行gem install jekyll;
安装完成,我们可以用jekyll命令争创一个博客模版,打开命令行执行:
cd d:
d:
jekyll new testblog
cd testblog
jekyll server
在浏览器键入:4000/即可浏览昨天争创的blog
到此jekyll 就安装完成了。
第三步 Jekyll 主题选择
上一步我们完成了jekyll的安装,默认争创的博客模版通常比较简略,jekyll官网提供了大量博客模版,我们可以去选购一个自己喜欢的博客模版,然后在这个博客基础上更改至满足自己需求的博客
点击抵达jekyll 主题官网
我选择的adam-blog这篇主题
点击Homepage可以链接至该blog Github页面个人网站源码下载后怎么安装,点击download可以下载该博客源码,点击demo可以预览该博客疗效
image
我们点击download,将该源码下载出来,命令行踏入该目录执行jekyll server,执行成功可以在控制台见到运行路径:
image
若下载的主题jekyll server执行失败,则用方法中学争创的testblog目录下的Gemfile,Gemfile.lock文件替换下载的主题旁边的该文件,若还不成功,则按照控制台提示的错误个人网站源码下载后怎么安装,可以百度至解决方案。 到此,我们早已选取了一个博客主题模版,接下来我们讲解下jekyll主题的目录结构
第四步 Jekyll 目录结构
jekyll目录结构主要包含如下目录:
_posts 博客内容
_pages 其他还要生成的网页,如About页
_layouts 网页排版模版
_includes 被模版包含的HTML花絮,可在_config.yml中更改位置
assets 辅助资源 css布局 js脚本 图片等
_data 动态数据
_sites 最终生成的静态网页
_config.yml 网站的一些配置信息
index.html 网站的入口
那么这种目录是怎样运作的呢?
我们打开根目录下的index.html可以看见:
—
layout: home-page
—
html代码段
上面的home-page我们至_layouts目录下可以找到:
image
实际上根目录下index.html运行后是home-page上面的代码内容,1中html代码段会填充的上图中的content位置
上图的default布局也可以再_layouts目录下找到:
image
实际上根目录下index.html运行后,home-page.html上面的代码内容会填充至上图中的content位置
jekyll是将分散在各个目录下的html文件条纹上去运行。
文章链接这儿有篇讲的比较好的,跟着该文章里的操作,能使你更熟悉
第五步 Jekyll 语法
上一步大约讲解了下Jekyll的目录结构,现在我们讲解下部份jekyll的句型,也可去官方网站学习更具体官方链接
{% for post in paginator.posts %} {% endfor %}表示一个for循环,百分号之间的句子为要执行的句子,该段代码表示分栏输出文章,分页人数在_config.yml中配置,注意:分页只在根目录下的index.html中有效
{ site.自定义数组名称 } 表示获取_config.yml旁边的自定义数组名称的值
{% for post in site.posts limit:2 %} {% endfor %}循环输出 2 篇文章
{% for post in site.posts offset:0 limit:2 %}循环输出最新2篇文章
{% for tag in post.tags %} {% endfor %}输出该篇文章里的tag
{% if link.type == site.blog_1 %} {% endfor %}字符串比较
| {% assign count = 0 %}****{% assign count = count | plus: 1 %}定义assign变量加1 |
{{post.content | strip_html | strip_newlines | truncate: 100 }}获取文章摘要,取前100个字符
2018-02-10-你要添加的描述.markdown,文章命名格式,否则辨识不了
{{ page.date | date: ‘%Y, %b %d’ }}输出文章日期
{{page.title}}输出文章标题
{% if post.jekyll %} 判断文章里的jekyll数组是否为true
{% if paginator.previous_page %}是否有上一页
{% if paginator.next_page %}是否有下一页
{{ paginator.previous_page_path }}上一页url
{{ paginator.next_page_path }}下一页url
| {{ post.url | prepend: site.baseurl }}要访问的文章的url |
第六步 修改博客模版
第四步中下载的博客模版发觉并不完全符合自己的需求,于是做了如下更改
1. 添加文章分类功能:
a. 在_config.yml中添加如下分类
image
b. 在_includes目录下的header.html上面添加如下代码,该代码是循环输出分类及该分类下的文章数目
image
c.在根目录下争创博客文件夹,在里面争创对应目录,目录名称跟a方法中的url路径对应
image
d.在每位目录下争创index.html,并按如下图形式添加代码,这样就可以按分类输出文章
image