xietao3

探索之旅,学习之路

你好,我是谢涛!欢迎来到我的个人主页.
90后代码搬运工,目前就职于上海天天果园,任职iOS高级开发工程师。


Jekyll + Github Pages构建个人技术博客

写技术博客可以积累并且巩固所学的知识,温故知新,还能传播知识,帮助他人解决问题。

前言

搭建专属于自己的博客,是每一个码农都会想要去实现的,以前自己也曾想要搭建,但是总有无从下手的感觉,随着知识阅历的提升,知道了一些搭建的方式,时机成熟,买下了梦寐已久的域名,便开始动手搭建。

参考

安装Jekyll

//打开命令行 使用gem安装Jekyll
gem install jekyll

启动Jekyll服务

//使用Jekyll创建你的博客站点
jekyll new blogname
</br>
//进入blog目录
cd blogname 
</br>
//在blog文件夹内 开启Jekyll服务
jekyll serve
</br>
//启动成功会提示站点地址,一般是[127.0.0.1:4000](http://127.0.0.1:4000),打开后就可以看到自己新建的站点

下载模板

// 过程中缺什么工具灵活安装
// 下载模板
$ git clone https://github.com/onevcat/vno-jekyll.git your_site
</br>
// 切换到模板所在的目录下
$ cd your_site
</br>
// 安装打包工具
$ bundler install
</br>
// 启动服务(此后启动站点服务都用👇这句,能实时加载新文章和页面改动,而不用重新启动服务)
$ bundler exec jekyll serve

模板内容

1. 需要调整的文件:
  • _config.yml——–博客配置文件,需要根据自身的情况修改
  • _posts————-新文章扔进这里
  • _includes———-页眉页脚等模板放在这里,根据自身的情况修改
  • css—————-各种页面配置
  • assets————-favicon、头像、首页背景图在这里面,可以直接替换
  • CNAME————–自定义域名放在这里面
  • README.md———-Github说明,需要根据自身的情况修改
  • feed.xml———–订阅
  • _site————–自动生成的博客内容,index.html需要根据情况修改
2. 以下文件不建议修改:
  • _layouts———–文章模板
  • index.html———首页模板
  • js—————–存放js文件
3. 更多jekyll模板

套用模板:

直接将修改后的模板内容copy到其他文件夹,再执行下面两句命令:
$ bundler install
$ bundler exec jekyll serve
即可运行成功

提交至Github Pages

  1. 在Github上Create a new repository
    • 填写Repository name的格式为username.github.io(需要严格遵守),其中username用自己取的名字的替换
    • 设置自定义域名Settings->Custom domain,或者本地目录创建CNAME亦可
    • 把本地的文件夹提交至改项目即可在username.github.io该网页看到自己的博客了
    • 这里是我的博客地址:xietao3.com 以供参考

结语

虽然写出来只有这么短短的一篇,背后其实花了不少心血; 在搭建过程中,我也遇到过很多问题,遇到问题的时候不要轻易放弃,希望各位也是如此; 其次写下这篇总结,由于我是先搭建完成然后再写的总结,具体按步骤实施下来出现种种问题,希望读者多多包容和提点。

最近的文章

Jekyll发布文章+评论模块

我想成为聪明的人,所以我在学习。前言在搭建好博客之后,又给自己增加的评论模块,还建了一个我自己比较喜欢关于页面,简单地介绍了下自己。参考Jekyll + Github Pages构建个人技术博客写作环境 使用Macbook,我一般是使用Mou写,实时预览功能很好用,Help -> Mou Help打开语法提示 在Windows下,我直接在简书上写,也有实时预览效果,而且会实时保存,需要联网Markdown Markdown上手还是很快的,使用简便,语法简单Markdown语...…

继续阅读
更早的文章

学习Markdown

这个世界太浮夸了,做技术的攀比也这么严重,还是要想想自己想要的是什么,再出发。前言 这个是本人练手用滴,勿喷。1、代码块NSSting *str = [[NSString alloc] init];str = @"123";NSLog(@"123"); Use the printf() function. There is a literal backtick (`) here. Please don’t use any <blink> tags. — is th...…

继续阅读