NICOLE

个人站

玉楼金阙慵归去,且插梅花醉洛阳


博客搭建报告

目录

01基本信息

1.1 Jekyll

本站主要使用Jekyll框架+Github Pages部署。Jekyll 是一个简单的静态网页框架,它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown 或者 Textile 转化成一个完整的可发布的静态网站,可以发布在任何服务器上。结合GitHub Pages,可以免去个人没有服务器的困扰,搭建一个免费、高效的个人网站。

使用 Jekyll 搭建博客之前要确认下本机软件安装,Git(用于从本地部署到远端)、Ruby(Jekyll 是基于 Ruby 开发的)、包管理器 RubyGems

1.2 主题

leopard 是一个简洁的博客模板,响应式主题, 适配了电脑、手机各种屏幕。

Demo

选择该主题的原因包括:

  • 主界面是一张大图,比较好看,想换的时候就换张图片,很方便
  • 把鼠标放到我的头像上,会发现它可以翻盖
  • 支持打赏功能(万一有大冤种打钱呢
  • 自带的页面数够多
  • 支持文章分类,查找方便

该主题的特色有:

  • 自适应屏幕
  • 响应式设计
  • 个性化头像
  • 支持站点总数访问统计,每篇文章访问统计
  • 支持打赏功能
  • 支持文章自动生成目录
  • 支持标签分类
  • 支持代码高亮
  • 支持数学公式显示
  • 支持标题样式多样化
  • 支持第三方社交网页显示

1.3 博客主要模块介绍

_config.yml

_config.yml 是整个博客的基础信息配置文件,修改这个文件可以直接把别人的博客变成自己的。

重要字段说明

  • comment/livere: livere评论系统,支持微信、qq、微博、豆瓣、twitter等登录后可以直接评论
  • comment/disqus: disqus评论系统,支持facebook、twitter等登录后可以直接评论
  • social/weibo、github、zhihu、jianshu等: 个人站底部展示的微博等三方社交按钮,点击后直接跳转到个人微博或其他社交主页
  • enableToc: 是否开启文章自动生成目录,设置为false文章不会自动生成目录
  • baidu/id: 百度统计,用来统计你个人站点的用户访问情况
  • ga/id: google统计,用来统计你个人站点的用户访问情况

_config.yml 文件除以上字段还有一些可以自行修改,例如title之类的字段。

_posts

_posts 目录是用来存放文章的目录,写新文章,直接放在这个目录即可。

自定义页面

about.md、support.md 等为自定义页面,如果想添加自动页面可以直接复制about.md 文件修改即可,比如本次课程要求四个页面,我的页面就包括:博客主页、所有文章、标签、 技术支持、关于我。

如果需要在导航显示新增的页面,直接在_config.yml 文件的nav字段中添加新页面配置。

02 搭建过程

Jekyll 环境配置

安装 jekyll:下载windows需要的安装包,解压并运行即可。顺便也下了Ruby和rvm。

创建博客

$ jekyll new test
$ cd test

启动本地服务

$ jekyll serve

在浏览器里输入: http://localhost:4000,就可以看到博客效果了。

目录结构

   Jekyll 的核心是一个文本转换引擎。它的底层逻辑是: 把标记语言写好的文章,Markdown,Textile or HTML 套入一个或一系列的布局中。

目录结构:

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2016-10-08-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

目录结构可以参考 官网文档

使用模板

首先安装bundler再启动服务,就可以在本地看到文件了。

$ gem install bundler
Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
......
Installing jekyll-watch 1.3.1
Installing jekyll 3.1.1
Bundle complete! 3 Gemfile dependencies, 17 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
$ jekyll server   

接着把本地仓库push到这个github 仓库(注意仓库名是有要求的)下,就可以输入网址访问博客了。

03 一点个人体会

首先写博客贵在坚持,不然就会像我一样搞得乱七八糟。

最开始这个博客是在大四搭的,当时我用它记录了一些毕业论文相关的知识体系。

后来看着不爽全删了(希望我不要再删任何东西了),打算用它写点影评,结果爱死机太好看了卧槽,停不下来,写影评这事只坚持了一集。

再之后上学期的算法课和数学课,感觉知识体系有点大,我想为复习写个博客,结果这样复习进度太慢,遂放弃。

希望以后可以静下心来写点东西。

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦