创建个人网站

微信公众号:Android部落格

个人网站:chengang.plus

1、方案

采用Github Pages + Jekyll的方式。

2、安装Jekyll环境

2.1 安装Ruby

因为网络的原因,Ruby installer安装文件难得下载,下载网址是:
https://rubyinstaller.org/downloads/或https://github.com/oneclick/rubyinstaller2/releases

2.2 下载RubyGems

下载地址是:https://rubygems.org/pages/download

下载完成之后解压到本地,假设解压目录是E:\RubyGems。进入该目录执行:ruby setup.rb

2.3 安装Jekyll

完成之后安装Jekyll:gem install jekyll。如果安装失败按照RubyGems中国镜像网站调整下载源:

https://gems.ruby-china.com/

切换方法是:gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

到这里就安装成功了。

3、Github Pages

注册一个github账号,起一个id,假设名称是lily。然后新建一个repository,名字必须是 lily.github.io。在当前repository的Settings选项中,可以设置主题,强制https访问等。另外这个repository必须是public。

到这里Github默认为我们创建了一个_config.yml文件,这个文件可以做网站的一些配置。

4、定制自己的静态网站

4.1 新建

在PC上某个文件夹下,用cmd命令行新建一个Jekyll静态网站,命令是:jekyll new yourblogname。

再执行jekyll server,成功之后就可以在本地生成一个网站相关的页面了,在浏览器输入http://127.0.0.1:4000/,即可访问。

4.2 定制

_config.yml文件可以做一些网站的详细配置,基础的配置项如下:

title: your website title
SEOTitle: seo title
header-img: header in explorer
description: your description
locale: zh
email: "email number"
url: "your own domain address"
baseurl: ""
social:
  github: "github number"


# Build settings
#theme: minima
markdown: kramdown
highlighter: rouge
remote_theme: we can use remote theme in github by formatter:githubname/themename
permalink: /blog/:title:output_ext
timezone: Asia/Shanghai
defaults:
  -
    scope:
      path: ""
      type: "pages" //layout type
    values:
      layout: "page" //correspond to layout
      keywords: keywords description
      description: description
  -
    scope:
      path: ""
      type: "posts" //layout type
    values:
      layout: "post" //correspond to layout
plugins:
  - jekyll-feed

# Theme Settings
logo: /assets/logo.svg
rss: "/feed.xml" // subscribe
theme_setting:
  blog_page: "index.markdown" //detail file
  about_page: "about.markdown" //detail file
  archive_page: "archive.markdown" //detail file
  nav_pages:
    - "about.markdown" //detail file
    - "archive.markdown" //detail file

# Gitalk
gitalk:
  enable: true    #is open Gitalk comment
  clientID:         #clientID from Gitalk
  clientSecret:     #clientSecret from Gitalk
  repo: github repo name,such as "lily.github.io"    #github repo name
  owner: github name    #lily
  admin: github name    #lily
  distractionFreeMode: true #shadow

# Analytics settings
# Baidu Analytics
ba_track_id: id from baidu

# Google Analytics
ga_track_id: 'id from google'            # Format: UA-xxxxxx-xx
ga_domain: your domain name

本人引用的主题是erlzhang/jekyll-theme-persephone,主题的github地址是:https://github.com/erlzhang/jekyll-theme-persephone。

按照主题的要求,分别在我本机网站目录下新建了index.markdown,about.markdown,archive.markdown。分别表示首页,关于页,归档页。

而在_config.yml的theme_setting配置中,必须按照上述文件布置排列,否则相关页面不能正确导航。

这里一些参数涉及到Jekyll的相关配置知识,可以参考:http://jekyllcn.com/docs/usage/

4.2.2 博客样式

在index.markdown文件中,可以设置当前主页的形式,本人这边引用的是博客样式,如下:

---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults

#layout: home

layout: "blog"
---

4.2.3 创建博客文件夹

博客目录是_post,直接在网站文件夹目录下创建这个文件夹。以后要写的博客就在这里了。

4.2.4 写博客

博客以markdown的形式撰写,文件名称必须按照:yyyy-MM-dd-博客标题。例如:2020-4-27-博客测试文章.markdown

写完之后,内容还有些不一样,内容必须按照如下规范:

---
layout: post
title:  "博客测试文章"
date:   2020-4-27 16:48:22 +0800
categories: your category
---

博客正文

这里的layout表示文章是post文件类型;title就是后续网站要显示的标题;还有subtitle可以设置;categories就是网站上要展示的分类了;博客正文用markdown写就行了。

4.2.5 为博客添加评论

这里评论以Gitalk为例,其github地址是https://github.com/gitalk/gitalk。这里的评论其实是给你博客所在github的repo提issue。

先为网站(lily.github.io)注册一个Application,地址是:https://github.com/settings/applications/new。

注册完成之后就会有一个clientID,和clientSecret,填到_config_yml的# Gitalk对应的位置就可以了。另外注册时,如果是使用lily.github.io,就填全称:https://lily.github.io;如果是自己的域名,就使用域名的网址,也要填全称。

接下来就是将博客控件添加到博客模板文件中,这个模板文件在远程主题中。这里就要fork一下远程主题到自己的github中了。

fork之后,clone到本地,然后进入到jekyll-theme-persephone\_layouts文件夹下,找到post.html文件,这个就是我们博客的模板,在article节点的最后添加:


{% if site.gitalk.enable %}

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js">script>
<div id="gitalk-container">div>


<script src="{{ site.baseurl }}/js/md5.min.js">script>
<script type="text/javascript">
    var gitalk = new Gitalk({
    clientID: '{{site.gitalk.clientID}}',
    clientSecret: '{{site.gitalk.clientSecret}}',
    repo: '{{site.gitalk.repo}}',
    owner: '{{site.gitalk.owner}}',
    admin: ['{{site.gitalk.admin}}'],
    distractionFreeMode: {{site.gitalk.distractionFreeMode}},
    id: md5(location.pathname),
    });
    gitalk.render('gitalk-container');
script>
{% endif %}

site.后面的那些变量就是我们在_config.yml中配置的变量,而这个模板会在每篇博客的底部生成一个评论视图,评论之前要用github登录,也就缩小了评论人群。

这个md5.min.js文件,放在网站所在文件目录下的js文件夹中。

4.2.6 为博客添加访问统计

基本就是百度统计和google统计了。

注册百度统计账号,https://tongji.baidu.com/,填入要统计的域名,得到一段代码。

注册google统计账号,https://analytics.google.com/,填入要统计的域名,得到一段代码。

将上述得到的两段代码填写到jekyll-theme-persephone\_includes\footer.html文件中:


{% if site.ba_track_id %}
<script>
    //
    var _baId = '{{ site.ba_track_id }}';

    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
script>
{% endif %}


{% if site.ga_track_id %}

<script async src="https://www.googletagmanager.com/gtag/js?id=your id">script>
<script>
  var _gaId = '{{ site.ga_track_id }}';
  var _gaDomain = '{{ site.ga_domain }}';


  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'your id');
  
  ga('create', _gaId, _gaDomain);
  ga('send', 'pageview');
script>
{% endif %}

可以看到这里的ba_track_id和google统计的id也是可以定义在_config.yml文件中,然后通过site引用的。

4.2.7 为博客添加目录

在博客标题之下,正文之上创建目录,可以方便定位到需要阅读的位置。方法参考:https://gist.github.com/cloudsben/6059930。

打开这个网址,将md-menu.html文件内容保存到toc.html,然后copy到jekyll-theme-persephone\_includes下,这里我们对原文做一点小改动,添加h1到目录:

原内容

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.2/styles/googlecode.min.css">
 
<script src="http://code.jquery.com/jquery-1.7.2.min.js">script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js">script>
 
<script>hljs.initHighlightingOnLoad();script>
<script type="text/javascript">
 $(document).ready(function(){
      $("h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('+tag+'" href="#wow'+i+'">'+$(this).text()+'
'
); $(".newh2").css("margin-left",0); $(".newh3").css("margin-left",20); $(".newh4").css("margin-left",40); $(".newh5").css("margin-left",60); $(".newh6").css("margin-left",80); }); });
script> <div id="category">div>

修改后

<link rel="stylesheet" href="{{ site.baseurl }}/js/googlecode.min.css">

<script src="{{ site.baseurl }}/js/jquery-1.7.2.min.js">script>
<script src="{{ site.baseurl }}/js/highlight.min.js">script>

<script>hljs.initHighlightingOnLoad();script>
<script type="text/javascript">
 $(document).ready(function(){
      $("h1,h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('+tag+'" href="#wow'+i+'">'+$(this).text()+'
'
); $(".newh1").css("margin-left",0); $(".newh2").css("margin-left",20); $(".newh3").css("margin-left",40); $(".newh4").css("margin-left",60); $(".newh5").css("margin-left",80); $(".newh6").css("margin-left",100); }); });
script> <div id="category">div>

可以看到我这里把两个js文件和一个css文件下载到本地了,也就是我们自己网站的js文件夹下。这里需要提醒下,远程引用主题时,有两个repo,一个是网站的repo(your blog repo name),一个是主题的repo(jekyll-theme-persephone)。这里的三个文件被我下到本地放到网站的repo下了。这样做的目的是为了加快目录展示速度。

接下来引用这个toc.html,在jekyll-theme-persephone\_layouts\post.html文件中的

节点下添加{% include toc.html html=content %},添加后如下:

<div class="post__content content">
  {% include toc.html html=content %}
  {{ content | img_prefix }}
div>

到这里就ok了。

这里所有对主题的修改要记得push到自己github下的主题repo里面去,我这里是jekyll-theme-persephone。

到这里基本上就完成个人网站了,将个人网站下的所有文件push到yourname.github.io(比如:lily.github.io)下,然后在浏览器输入yourname.github.io就可以访问自己的网站了。

5、为网站设置个人域名

5.1 购买域名

在腾讯云或阿里云都可以购买,你中意的那个域名在两个云上可能价格不一样,我是捡便宜的买。最终购买了chengang.plus。

购买完成,审核通过,备案通过,添加解析,可以添加www和@方式解析,意味着www.yourdomain和yourdomain都可以解析到yourdomain。解析ip,就是你yourname.github.io的ip,在PC的cmd命令行里面ping一下得到域名对应的IP,直接把IP填到两个解析方式的IP字段里面去,就ok了。

另外腾讯云有一个一年免费的https SSL证书,先申请,审核通过之后就可以在自己域名前面加https了。

5.2 将域名应用到个人网站

在个人网站的repo下,选择Settings,有一个domain选项,直接设置自己的域名,不用加http或https。然后如果申请了SSL证书,可以Enforce Https。

6、网站本地调试

Jekyll支持本地调试,在网站相关文件都准备完毕之后,可以在网站文件目录下,cmd执行:bundle exec jekyll serve。执行完成之后,在浏览器输入:http://127.0.0.1:4000/ 即可访问。

问题1

Error: Permission denied - bind(2) for 127.0.0.1:4000

127.0.0.1:4000被占用了,在cmd输入:netstat -aon | findstr “4000”,找到被占用的进程,在PC的任务管理器中找到该进程号,然后结束任务即可,再执行bundle exec jekyll serve即可。

问题2

网站突然打不开了

如果是自己的域名,先ping一下yourname.github.io,看看输出的IP跟自己域名解析的IP是否一致,不一致,更换再访问;如果是yourname.github.io,检查下自己能不能访问github。

创建个人网站_第1张图片

你可能感兴趣的:(建站,其他)