gitpage+jekyll搭建个人网站

开发环境

安装rubyinstaller
安装选项全部勾选
安装完毕后勾选Run'ridk install'to setup MSYS2 and development toolchain,进入终端,MSYS2 components全部安装

ruby -v

如果正常响应版本号则代表安装正确
下载并解压Development Kit(https://rubyinstaller.org/downloads/),注意选择和ruby相匹配的版本,如 DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe 适用于64位 Windows 系统上的 Ruby 2.0.0及以上的版本

ruby dk.rb init #edit in DevKit file

DevKit文件夹中会自动生成一个config.yml文件,修改config.yml,添加Ruby的安装路径

# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
- D:/Ruby25-x64

ruby dk.rb install #edit in DevKit file

更新Ruby source

gem sources -l 查看当前已经添加的源,然后将他们全部移除
gem sources -r https://rubygems.org/ 移除官方源(如果已添加)(国内官方源无法访问)
gem sources -a https://gems.ruby-china.com/ 添加ruby china 可用源(推荐)
gem sources -l 查看当前已经添加的源,是否正确修改

安装jekyll

gem install jekyll
jekyll -v
gem install jekyll bundler
gem install jekyll-paginate

网站的服务器: github.com

New Repository -> (Repository name)username.github.io -> Creat Repository
clone 到本地,工程文件夹username.github.io,作为根目录,将存放所有网站文件。

样式表: /css/main.css

body {
    margin: 60px auto;
    width: 70%;
}
nav ul, footer ul {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    padding: 0px;
    list-style: none;
    font-weight: bold;
}
nav ul li, footer ul li {
    display: inline;
    margin-right: 20px;
}
a {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 3em;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
p {
    font-size: 1.5em;
    line-height: 1.4em;
    color: #333;
}
footer {
    border-top: 1px solid #d5d5d5;
    font-size: .8em;
}

ul.posts { 
    margin: 20px auto 40px; 
    font-size: 1.5em;
}

ul.posts li {
    list-style: none;
}

网站的域名 /CNAME

申请域名

网站的入口: /index.html



    
        Hank Quinlan, Horrible Cop
        
    
        
        

Hi there, I'm Hank Quinlan!

I'm best known as the horrible cop from A Touch of Evil Don't trust me. Read more about my life...

网站设置 /_config.yml

this file tells Jekyll some basics about your project

name: MyBlog
markdown: kramdown

攥写博客

博客的模板 /_layout/default


    
        
            {{ page.title }}
            
            
        
        
            
            
{{ content }}

博客的模板 /_layout/post

---
layout: default
---

{{ page.title }}

{{ page.date | date_to_string }}

{{ content }}

博客文件 /_posts/YYYY-MM-DD-title-of-my-post.md

注意文件名的格式,例如:2018-12-16-my-first-blog.md

---
layout: post
title: "使用gitpage搭建个人网站"
date: 2014-04-30
---

Well. Finally got around to putting this old website together. Neat thing about it - powered by [Jekyll](http://jekyllrb.com) and I can use Markdown to author my posts. It actually is a lot easier than I thought it was going to be.

草稿 /_drafts

随便添加,跟随git一起上传,实现草稿的保存和更新,成型后再转移到_posts中

打开预览功能

jekyll server

最后

git add .
git commit -m "first vision"
git push -u origin master

GitHub Application

GitHub -> Settings -> Devloper settings -> New OAuth App
Application name ->
GitHub -> Settings -> Devloper settings -> OAuth App ->Comment
Client ID
Client Secret

    var gitalk = new Gitalk({
        clientID: `Github Application clientID`,
        clientSecret: `Github Application clientSecret`,
        repo: `Github 仓库名`,
        owner: 'Github 用户名',
        admin: ['Github 用户名'],
        id: 'indow.location.pathname', 注意id一定不要重复,这里是举个例子,可以写中文,如果重复了,就会把其他地方的评论显示过来

    });
    gitalk.render('gitalk-container');
 

Reference

http://jmcglone.com/guides/github-pages/

你可能感兴趣的:(gitpage+jekyll搭建个人网站)