关于本站建设

一、说在前面

​ 关于本站,初衷主要还是前面的那封信,同样也是记录一些开发过程中的遇到的困难、挑战、解决与愉悦。这篇文章主要是建设本站过程中的经过,希望对大家有所帮助。

二、准备

序号 工具
1.服务器 百度云活动(计算型C3/2核/4G/40G/1M带宽/WindowsOS)
2.域名 homily.com.cn/homily.cn
3.应用服务器 Tomcat
4.gitbook 一个可以在本地编译发布的工具
5.gitbook插件 "folding-chapters","mygitalk","pageview-count","tbfed-pagefooter","baidu-tongji"
6.Typora 一个编写markdown的工具,功能基本满足

三、gitbook

3.1 为什么选择gitbook

​ 因为好用,所以值得拥有。在这之前是在某静态网站上扣出来一个页面,写着写着觉得觉得特别臃肿,因为页面跳转全部用ajax,且体验太差。所以搜索就发现了这款开源项目。

3.2 安装for mac
brew search gitbook

​ 如果没有安装brew先安装homebrew,这篇文章还没写完,后面再补。

brew install gitbook
3.3 安装for windos
npm install gitbook-cli -g
3.4 初始化

​ 首先需要一个目录,你需要使用命令行切换到需要初始化的目录。初始化命令:

gitbook init

当在一个空文件夹下执行该命令时,会提示

MacBook-Pro:test luoyi$ gitbook init
warn: no summary file in this book 
info: create README.md 
info: create SUMMARY.md 
info: initialization is finished

​ 空文件夹下会创建README.md(首页)和SUMMARY.md(目录)

3.5 部署

​ 命令如下:

gitbook serve

​ 执行信息如下:

MacBook-Pro:test luoyi$ gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 7 plugins are installed 
info: loading plugin "livereload"... OK 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 1 pages 
info: found 0 asset files 
info: >> generation finished with success in 0.4s ! 

Starting server ...
Serving book on http://localhost:4000

上述信息中CTRL+C可以退出当前进程,部署好的服务可以通过http://localhost:4000在浏览器中访问。

3.6 构建
gitbook build

这个命令可以理解为编译版本

3.7 插件

关于插件就不得不说说book.json文件了,你可以在根目录下创建一个这个文件。内容格式如下:

{
  "plugins":["folding-chapters","mygitalk","pageview-count","tbfed-pagefooter","baidu-tongji"],
  "pluginsConfig": {
    "mygitalk": {
        "clientID": "xxxxxxxxxx",
        "clientSecret": "xxxxxxxxxxxxxxxxx",
        "repo": "threew.github.io",
        "owner": "Threew",
        "admin": ["Threew"],
        "id": "window.location.pathname",
        "distractionFreeMode": true
    },
    "folding-chapters":{},
    "tbfed-pagefooter": {
            "copyright": "Copyright &Copy 洛易 2019",
            "modify_label": "该文件修订时间:",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },
    "baidu-tongji":{
        "token": "xxxx",
        "url": "https://hm.baidu.com/hm.js"
    }
  }, "styles": {
        "website": "styles/website.css"
    }
}
3.7.1 folding-chapters

​ 这个是目录的折叠组件,一级菜单* + 空格 + 菜单名, 二级菜单 空格 + * + 空格+菜单名 ,反正是在最前面加几个空格就是几级菜单。但编码的时候记得加号略去。如下所示:

* [Java]()
  * [入门基础]()
    * [快速入门](java/base/quick_start.md)
  * [Java进阶]()
    * [多态]()
      * [初识多态](java/more/what_is_polymorphism.md)

效果如下图:

PS:需要注意的是,这个控件在Typora编写的时候,有时候目录会错乱,此时你需要看看文件中的代码是否有异常情况。

3.7.2 mygitalk

​ 这个是评论控件,操作起来有点小麻烦。先说下原理,github上有个issues,也就是你的这个网站借用了github上的评论功能。在初始化的时候,issues会将每个页面都创建一个评论,网站上的评论都会在上面。

第一步:

​ 在已经拥有github账号的情况下,首先你需要github的评论授权。在github的setting菜单的最底下有个Developer settings,进入后你会发现OAuth Apps。这里可以创建评论的授权,如下图:

Homepage URL和Authorization callback URL填你的网站域名。注册完之后会有你需要的Client ID和Client Secret。

​ 第二步:

​ github page,这个github提供编写blog的功能。试了试,感觉还可以,简单的说下,这个与gitbook很类似,也是用markdown,并且可以切换主题(https://pages.github.com/themes/),在_config.yml修改即可。需要创建一个仓库,名字是你的github名+github.io,创建好后,repo就是填这个url,owner和admin也是填你的github名。id是每个页面的唯一id,这里用当前页面的url作为id,但是如果这个url的长度不能超过50,需要在插件的js代码里改下,在gitbook-plugin-mygitalk/assets/mygitalk.js下,代码如下:

####require([
    "gitbook"
], function(gitbook, $) {
    var mygitalk = {};
    gitbook.events.bind("start", function(e, config) {
        mygitalk = config.mygitalk || {};
        initMygitalk();
    });
    gitbook.events.bind("page.change", initMygitalk);
    function initMygitalk() {
        var title = window.location.pathname.substr(0, 50);//this code
        mygitalk["id"] = title;
        const gitalk = new Gitalk(mygitalk);
        gitalk.render("gitalk-container");
    }
});

可能会有一些问题,但是认真按照步骤弄,肯定会成功的。

3.7.3 pageview-count

​ 这个是记录访问个数统计的控件

​ 版权页脚插件

3.7.5 baidu-tongji

​ 还有一个baidu的控件,但是试了试不太行,后来又换成这个,但是看了下插件的js代码,配置时还是需要加上url,如最上面book.json中的配置。

3.8 markdown语法

​ 目录语法:

​ 标题 : ### 标题

​ 分割线:---

​ 折叠:在3.7.1中有讲

正文语法:

​ 使用Typora工具,你可以不用学习什么语法了。

©2020 洛易                        皖ICP备15026941号-4 该文件修订时间: 2019-09-25 08:48:10

results matching ""

    No results matching ""