于志腾的技术专栏 PHP and Python and Vue Coder

GitHub快速的搭建个人博客到个性化设计

2018-09-09
YztSon

阅读:


由于服务器到期了,公司一直忙,腾讯云一直给我发短信提示,我也没有管结果你们懂的,坚持写的博客没有了,当时的博客还是自己一手写的呢!从页面到后端逻辑。周六日无聊,那就在搞一下吧,见证一下,一次性成功!

搭建方式

  • 方式一: GitHub Pages + Hexo 的方式

  • 方式二:GitHub Pages + jekyll 的方式

当然了我采用的搭建博客的方式是第二种因为第一种之前搞过:

使用GitHub Pages +jekyll的方式

Github Pages服务托管静态页

  • 由于这个比较简单而且帖子比较多在此给一个链接: 链接1 链接2

  • 上面完成之后,你会发现其实托管之后就是一个静态的页面,似乎有些失望,因为感觉没有什么,接下来是重点!

如何能够快捷的创建博客内容:

通过前面的学习,你应该自己能想到如何通过手工创建pages,其实很简单,只需要手工创建一个gh-pages分支,在这个分支里开发你的静态站点,然后push到github就可以了。

  • 使用Jekyll搭建博客系统: mac 下面安装

Transform your plain text into static websites and blogs

Jekyll是一个将纯文本转换成静态站点或blog的工具。

github pages对Jekyll提供原生支持,可以免费将你的blog托管到github pages。

废话不说,如果想详细了解Jekyll,请到官网:http://jekyllrb.com/

Jekyll是用ruby开发的,所有安装Jekyll之前需要执行下面的命令安装一些依赖


brew install ruby
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
cmdshelf               golang-migrate         libpsl                 pagmo                  prototool
==> Updated Formulae
glib                        fauna-shell                  kakoune                      phpunit
node                        fdk-aac-encoder              kettle                       presto
adwaita-icon-theme           file-roller                  lf                           pygobject3
annie                        firebase-cli                 libarchive                   quicktype
apktool                      fluent-bit                   libdazzle                    rclone
at-spi2-core                 gauge                        libre                        shibboleth-sp
aws-okta                     gdal                         libsoup                      skaffold
baobab                       gdk-pixbuf                   libxlsxwriter                smali
bibutils                     gedit                        logtalk                      sphinx-doc
bitwarden-cli                geogram                      mercurial                    swiftformat
bzt                          gifski                       meson-internal               tarantool
caf                          git-archive-all              mesos                        telnet
ccache                       git-ftp                      metabase                     template-glib
certbot                      gitbucket                    metashell                    tile38
cgal                         gjs                          mmseqs2                      topgrade
checkbashisms                glib-networking              mongodb                      travis
circleci                     glslviewer                   mongodb@3.2                  trezor-agent
citus                        grafana                      multimarkdown                uftp
convox                       grpc                         nats-streaming-server        unrar
curl                         gsettings-desktop-schemas    nghttp2                      v8
davmail                      gtksourceview3               node-build                   vault
dhall-json                   gtksourceview@4              nsq                          vte3
diffoscope                   gucharmap                    nss                          webpack
dnstwist                     hcloud                       oniguruma                    wildfly-as
dosbox                       ios-deploy                   openrtsp                     wireguard-tools
dxpy                         iso-codes                    pdftoedn                     xml-tooling-c
emscripten                   jenkins                      pdns                         yelp-tools
erlang                       jhipster                     pdnsrec                      zabbix
evince                       jsonrpc-glib                 php-cs-fixer                 zsh
==> Renamed Formulae
rebar@3 -> rebar3

Warning: ruby 2.5.1 is already installed and up-to-date

ruby -v
Warning: ruby 2.5.1 is already installed and up-to-date
To reinstall 2.5.1, run `brew reinstall ruby`

安装(jekyll):


gem install jekyll
Fetching: public_suffix-3.0.3.gem (100%)
Successfully installed public_suffix-3.0.3
Fetching: addressable-2.5.2.gem (100%)
Successfully installed addressable-2.5.2
Fetching: colorator-1.1.0.gem (100%)
Successfully installed colorator-1.1.0
Fetching: http_parser.rb-0.6.0.gem (100%)
Building native extensions. This could take a while...
Successfully installed http_parser.rb-0.6.0
Fetching: eventmachine-1.2.7.gem (100%)
Building native extensions. This could take a while...
Successfully installed eventmachine-1.2.7
Fetching: em-websocket-0.5.1.gem (100%)
Successfully installed em-websocket-0.5.1
Fetching: concurrent-ruby-1.0.5.gem (100%)
Successfully installed concurrent-ruby-1.0.5
Fetching: i18n-0.9.5.gem (100%)
Successfully installed i18n-0.9.5
Fetching: rb-fsevent-0.10.3.gem (100%)
Successfully installed rb-fsevent-0.10.3
Fetching: ffi-1.9.25.gem (100%)
Building native extensions. This could take a while...
Successfully installed ffi-1.9.25
Fetching: rb-inotify-0.9.10.gem (100%)
Successfully installed rb-inotify-0.9.10
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.5.7.gem (100%)

在命令行执行如下命令生成Jekyll基本目录结构:


jekyll new buqiucdn.github.io
cd buqiucdn.github.io

看一下生成的结构

.
├── CNAME
├── LICENSE
├── README-zh-cn.md
├── README.md
├── _config.yml
├── _drafts
│   ├── ES2015-note.md
│   ├── WebSocket.md
│   └── threeJS-light-shadow.md
├── _includes
│   ├── backToTop.html
│   ├── category.html
│   ├── comments.html
│   ├── footer.html
│   ├── head.html
│   ├── header.html
│   ├── previousAndNext.html
│   └── tag.html
├── _layouts
│   ├── default.html
│   ├── demo.html
│   ├── page.html
│   └── post.html
├── _posts

项目目录

文件/目录 说明

_config.yml Jekyll配置文件 _drafts 草稿目录 _includes 页头、页脚之类的放于这个目录,可以使用 include header.html这样的标签在别的地方引用 _layouts 这里是存放页面模板的地方,可以在模板中使用content来引用页面内容 _posts 这里就是存放动态的博客内容,标题必须为YEAR-MONTH-DAY-title.MARKUP格式 _data 存放yaml格式的数据文件,比如存了一个members.yml的文件,那么在别的地方可以使用site.data.members引用相关数据 _site 使用Jekyll编译后的静态站点将存放于这个目录下,这个目录不需要push到github,所以要在.gitignore文件中加入这个目录 index.html and other HTML, Markdown, Textile files 首页内容 Other Files/Folders 其它文件和目录会当做静态内容处理

本地运行

在命令行执行:jekyll server 启动jekyll站点。用浏览器打开http://localhost:4000

可能会报错: Dependency Error: Yikes! It looks like you don’t have jekyll-paginate or one

解决办法:

解决办法:安装jekyll时候直接运行gem install jekyll-paginate即可解决

博客皮肤

可以更换一下把我的博客在git上拉下来自己改该或者自己去搜一下

欢迎串门


上一篇 python之set运用

Comments

Content