前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何搭建免费博客

如何搭建免费博客

作者头像
付威
发布2018-12-05 16:42:02
1.1K0
发布2018-12-05 16:42:02
举报
文章被收录于专栏:老付的网络博客

对于经常写博客的人,都很想拥有一个属于自己的独立博客,但一个独立的博客可能需要以下几个东西:

1. 域名

2. 一个前端的模板

3. 一个后台的管理

4. 一个数据库

5. 部分的统计和其它模块

这样的话,我们的精力可能都了要放到博客的管理上面,而不是博客的内容。 随着github的出现,这样问题出现了改观,使用gitbub提供的github pages功能可以提供一个独立的站点供我们使用。结合相关的域名配置,我们就可以很方便的搭建属于自己的博客平台。

github Pages的使用

概述

对于开发者来说github是很熟悉的,是一个托管代码和开源的网站.如果你想找一个开源的项目,首先看到的可能是一个源码的列表,这样对于项目的展示不够直观,github pages就是为也解决这个问题而出现,允许开发者自定义一个展示页面,来替代原有的代码列表。

具体的规则

在github的项目中,创建一个gh-pages的分支,分支创建完成后就可以使用http://{userName}.github.io/{projectName}来进行访问。更详细参见:github Pages

一个实例

1. 创建一个项目,并对项目进行初始化,运行以下命令

代码语言:shell
复制

   mkdir gitDemo #创建一个目录

   cd gitDemo 

   git init  #git 初始化

   git checkout  --orphan gh-pages # 创建gh-pages分支。
 

2. 进行gitDemo文件夹,添加一个html文件,index.html,添加如下内容:

代码语言:javascript
复制
 	<h1>Hello github Pages!!</h1> 

3. 在github上面添加一个Repositories,名为blogTest

4. 把项目推送到分支,执行以下命令:

代码语言:javascript
复制
 git add . 

 git commit -m 'first' 

 git remote add origin https://github.com/{userName}/blogTest   

 git push origin gh-pages
 

大约等待2min后,访问https://{userName}.github.io/blogTest/index.html,看到如下效果:

gh-pages
gh-pages

总结一下

对于上面所述的github Pages(以下称gh-Pages)是github给用户提供一个“静态页面的web服务器”,我们可以根据需要把页面上传到指定的仓库中,可以通过github的规则来完成访问。到这里,不禁有一个疑问,gh-Pages虽然给了一个可以展示html平台,写博客如果全部都写html,那我们还要精力去调整样式和布局的问题.再者博客也要有评论功能,这两个问题如何解决?

jekyll 模板

jekyll 是基于ruby来编写的一个博客模板生成工具,也就是说我们可以根据相关的规则来生成对应的html文件,当然这份工作github也能帮你去做。详细介绍参见jekyll官方文档

jekyll安装

jekyll的安装可以参见

windows安装Jekyll

linux和MacOS安装Jekyll

jekyll使用

1. jekyll 安装是否成功,首先看下jekyll的版本,执行:

代码语言:javascript
复制
  jekyll --version     
 
jekyllversion
jekyllversion

2. 创建jekyll的指定目录

代码语言:javascript
复制
mkdir _posts     

mkdir _layout   

echo  >>_config.yml  

3. 在_layout下创建一个default.html,作为一个网站的模板,添加如下内容(此处代码中的所有的{ {中间都有一个空格,为了不让jekyll去解析,拷贝的时候请注意):  

代码语言:javascript
复制
   <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>{ { page.title} }</title>
    </head>
    <body>

      { { content } }

    </body>
    </html>

jekyll的支持Liquid 语法,详细参见:Liquid for Designers

4. 进入_posts创建一个markdown文件或者是html文件,文件名格式必须是:年-月-日-xxxx.md

代码语言:javascript
复制
     ---
    layout: default
    title: Hello Jekyll
    ---
    <h2>{ { page.title } }</h2>
     <h3> Hello jekyll </h3>

5. 创建首页,首页是为了显示文章列表的网页,我们需要做的是遍历_post文件夹中的所有文章,然后展现出来,添加简单的代码如下:

代码语言:javascript
复制
     ---
    layout: default
    title: My Blog
    ---
    <h2>{ { page.title } }</h2>
    <p>最新文章</p>
    <ul>
      { % for post in site.posts % }
        <li>{ { post.date | date_to_string } } <a href="{ { site.baseurl } }{ { post.url } }">{ { post.title } }</a></li>
      { % endfor % }
    </ul>

6. 编译和运行,一切都准备好后,开始编译和生成我们的网站:

代码语言:javascript
复制
    jekyll build   # 生成_site目录         

    jekyll server  # 生成并启动一个server,127.0.0.1:4000可以访问本地的目录。

在浏览器中打开127.0.0.1:4000可以看到刚刚生成的网站:

my blog
my blog
my blog
my blog

到这里,我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。

代码语言:javascript
复制

     git add .

     git commit -m 'myblog'   

     git push origin gh-pages 		
 

等待2min后,github 会根据我们上传的模板把数据生成到对应的分支上面. 开始你的博客之旅!

(本文完)

作者:老付 如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者,如果有问题,请在捐赠后咨询,谢谢合作 如有任何知识产权、版权问题或理论错误,还请指正。 自由转载-非商用-非衍生-保持署名,请遵循:创意共享3.0许可证 交流请加群113249828: 点击加群  或发我邮件 laofu_online@163.com

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-05-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • github Pages的使用
    • 概述
      • 具体的规则
        • 一个实例
          • 总结一下
          • jekyll 模板
            • jekyll安装
              • jekyll使用
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档