美文网首页
gitpage+jekyll搭建个人网站

gitpage+jekyll搭建个人网站

作者: 森林中的大象 | 来源:发表于2019-01-12 22:13 被阅读0次

开发环境

安装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

<!DOCTYPE html>
<html>
    <head>
        <title>Hank Quinlan, Horrible Cop</title>
        <link rel="stylesheet" type="text/css" href="/css/main.css"
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>          
                <li><a href="/Posts">Posts</a></li>    <!-- you should create /Posts.html -->
                <li><a href="/About">About</a></li>    <!-- you should create /About.html -->
            </ul>
        </nav>
        <div class="container">
            <div class="blurb">
                <h1>Hi there, I'm Hank Quinlan!</h1>
                <p>I'm best known as the horrible cop from <em>A Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...</a></p>
            </div><!-- /.blurb -->
        </div><!-- /.container -->
        <footer>
            <ul>
                <li><a href="mailto:hankquinlanhub@gmail.com">email</a></li>
                <li><a href="https://github.com/hankquinlan">github.com/hankquinlan</a></li>
            </ul>
        </footer>
    </body>
</html>

网站设置 /_config.yml

this file tells Jekyll some basics about your project

name: MyBlog
markdown: kramdown

攥写博客

博客的模板 /_layout/default

<!DOCTYPE html>
    <html>
        <head>
            <title>{{ page.title }}</title>
            <!-- link to main stylesheet -->
            <link rel="stylesheet" type="text/css" href="/css/main.css">
        </head>
        <body>
            <nav>
                <ul>
                <li><a href="/">Home</a></li>          
                <li><a href="/Posts">Posts</a></li>    <!-- you should create /Posts.html -->
                <li><a href="/About">About</a></li>    <!-- you should create /About.html -->
                </ul>
            </nav>
            <div class="container">
            
            {{ content }}
            
            </div><!-- /.container -->
            <footer>
                <ul>
                    <li><a href="mailto:hankquinlanhub@gmail.com">email</a></li>
                    <li><a href="https://github.com/hankquinlan">github.com/hankquinlan</a></li>
                </ul>
            </footer>
        </body>
    </html>

博客的模板 /_layout/post

---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>

<div class="post">
  {{ content }}
</div>

博客文件 /_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');
</script> <!-- Gitalk end -->

Reference

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

相关文章

网友评论

      本文标题:gitpage+jekyll搭建个人网站

      本文链接:https://www.haomeiwen.com/subject/oekhdqtx.html