MWeb 网站生成到Gitee发布为个人网站

2018/11/5 posted in  linux

一直希望有一个直接在客户端上更新文档,然后直接提交到个人网站上面进行发布,省去中间的操作~没有中间商赚差价~,所以一直说世界是懒人改变的~懒癌病犯了~

一直在用MWeb,确实是一个很好的Markdown MAC客户端,平常都是用MWeb在写日志,之前一直没有用MWeb发布blog,只是用来做平时工作的记录,在把自己的MWEB更新了3.0版本之后,还是抽出时间来整理一下自己的功能。

Mweb作者写过一篇放在github上面的文档,多少年前也在用github做自己的网页,但是现在手头有自己的服务器,还是做一个直接发布到自己服务器上面的方法,平时使用gitee比较多(因为可以私有库),所以就整理一个在MWeb上面写blog,然后生成静态网站,最后自动部署的小工具。

整体流程如下: ~后面补个流程图

  1. MWEB写blog,同步目录到Website里面,(我使用的是双目录的方式,平时日志还是卸载资源库里面,然后需要发布的blog将目录添加到网站目录中去,这样方便以后维护,不要的把目录去掉就可以了)
  2. 发布网站
  3. 将发布的网站文件同步到Gitee。
  4. 使用webhook将gitee上面的文件同步到阿里云发布服务器上
  5. 发布服务器获取后自动同步更新

先说一下配置优势:

  1. 文章在gitee上实时归档,并且可以不同方式撤回,免去了丢失的风险,同时将生成的MD文件也进行一个归档,这样会比当前很多的网盘要好,方便找回某个时间点的备份。 ~吐个小嘈,有时候MWeb还是会出现目录删除之后里面的文档都删除了的问题,那叫一个郁闷~
  2. 方便,一件发布到网站。在MWeb里面更新Blog绝对是一种享受。不用再像以前要多做一次发布

具体过程:

1. MWEB中构建静态网站

在MWeb中创建一个静态网站的分类,构建好网站的目录,然后将需要发布到网站的文章添加网站目录。 (具体操作MWeb官方blog上都有,可以直接参考,就不在这里废话了)

2. 设置网站发布目录

设置网站发布位置,MWEB默认的位置比较难找,主要是还担心添加了git之后出问题,所以就把网站发布位置切换了,具体可以看下面

我将目录移动到自己的目录了

3. 在Gitee创建项目

在Gitee上创建新的项目,项目创建之后Gitee也有默认的告诉你的基本命令。创建完成之后就可以将本地目录绑定到项目上了,建议多加一层目录同步,否则会比较麻烦

4. 绑定本地仓库

命令行到本地目录

git init
git add .
git commit -m "first commit"
git remote add origin https://gitee.com/********/ITBoxBlog.git
git push -u origin master

新的提交使用如下命令

git add --ignore-removal .
git commit -m "我的注释"
git push -u origin master

这样就把本地同步到gitee上了。

5. 配置远程发布环境

由于MWeb直接生成的静态化页面,所以只需要在远端建立目录,pull代码,然后使用Nginx发布就可以了。

linux上创建文件夹,执行 git clone
由于gitee需要密码访问,所以最好的方式是记录下来密码,这样方便后续的自动化脚本执行。直接修改.git/config文件

ubuntu@VM-7-212-ubuntu:~/kernel-code/kernel-netfilter-sample-code$ vim .git/config

##修改成如下

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
[remote "origin"]
    url = https://github.com/Miss-you/kernel-netfilter-sample-code.git
    fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
    remote = origin
    merge = refs/heads/master
##主要是后面这两行,如果不想保存,则删除即可
[credential]
    helper = store

##保存

这样后续就会记住当前的用户名和密码。下次git pull的时候可以直接使用

6. 配置Nginx

Nginx中增加如下配置

server {
    listen 80;
    server_name blog.pengjunjie.com;

    location / {
        alias /opt/itboxblog/ITBoxBlog/;
        index index.html;
    }
}

增加DNS配置到当前服务器

启动后查看一下Nginx配置是否成功,网站是否成功启动

7. 配置WebHookit自动发布

前面的步骤,中间push和pull都是手动的。所以先解决发布服务器在检测到Push之后自动化发布的问题。

现在基本上所有的Git都用上了webhook, 这里采用国内的一个webhookit组件。 这个组件非常的轻量,不用搞很多复杂的配置,安装即用

# 1. install webhookit
pip install webhookit

# 2. initial a webhookit config file
webhookit_config > /home/hustcc/webhook-configs/config4hustcc.py

# 3. update config4hustcc.py with your own config and save
vim config4hustcc.py

# 4. run webhookit http server
webhookit -c config4hustcc.py

这样启动是带着客户端启动,建议使用后台启动方式

nohup webhookit -c config4itbox.py &

如果需要停止进程可以使用ps -ef|grep config来找到相应的进程进行kill

安装完成后需要使用到系统的18340端口,所以需要在安全组里面把18340端口给打开

配置好之后在gitee上配置相对应的webhook

注意这个地方一定要配置http://121.41.8.92:18340/webhookit 带webhooit的子目录,如果没有配置会找不到相应的方法。

前面配置http://121.41.8.92:18340/ 一直返回405找不到原因,翻出来源码看到了如下一段代码

application = tornado.web.Application([
    (r'/', IndexPageHandler),
    (r'/webhookit', WebhookitHandler),
    (r'/ws', WSHandler)
])

可以看到tornado解析了如下三个目录,如果没有的话会走/,会走到默认的get方法里面,但是webhooks发的是POST请求,所以肯定会报405方法没有定义。而真正的webhookit定义的webhook在WebhookitHandler里面,所以需要带上/webhookit目录。

配置完成后执行测试如果看到如下结果就是成功,可以在服务器上看到相应的任务进程

最后需要修改配置

config4itbox.py文件

# -*- coding: utf-8 -*-
'''
Created on Nov-04-18 13:07:25

@author: hustcc/webhookit
'''


# This means:
# When get a webhook request from `repo_name` on branch `branch_name`,
# will exec SCRIPT on servers config in the array.
WEBHOOKIT_CONFIGURE = {
    # a web hook request can trigger multiple servers.
    'ITBoxBlog/master': [{
        # if exec shell on local server, keep empty.
        'HOST': '',  # will exec shell on which server.
        'PORT': '',  # ssh port, default is 22.
        'USER': '',  # linux user name
        'PWD': '',  # user password or private key.

        # The webhook shell script path.
        'SCRIPT': '/opt/itboxblog/webhookit/exec_shell_hook.sh'
    }]
}

完成之后修改这个exec_shell_hook.sh文件

#!/bin/bash
echo `date +"%Y-%m-%d %H:%M:%S"` begin >> update.log

cd /opt/itboxblog/ITBoxBlog/
git pull

完成后这样每次webhookie会自动催发这段脚本进行Git pull更新

访问这个链接地址可以查看webhookit状态 http://......:18340

8. 配置MWeb生成后自动提交

在MWEB中提供了发布脚本的功能,可以写好脚本后发布使用,相应的配置如下

注意这里的发布脚本执行前的动作可以选上生成网站,这样就只用点发布命令就可以进行全部发布了。

在网站上选择发布脚本命令就会在终端里自动执行这一段代码

参考文章

https://www.ibm.com/developerworks/cn/linux/l-cn-nohup/index.html

git设置用户名密码