给你静态网站或者 github 博客加个 https

原文： http://mp.weixin.qq.com/s?__biz=MzA4MTM5ODM3MA==&mid=2649868227&idx=1&sn=5f427e436da68f2cb9de987403945856#rd

由于很多格式性的内容无法复杂，所以如果感觉不方便看，可以查看原文。

相信很多会玩 github 的小伙伴都已经开通了 github 的博客了吧？想不想给自己的博客加个 https 服务呢？如果感觉兴趣的话，就跟我一起来给它(们)加个 https 安全链接吧。

如果对于如何在 github 创建自己的静态博客或者网址还不清楚的，可以自行 google 一下。之前我们的微信公共帐号： frontend-guru 已经给大家做了一期关于静态网站生成与服务的文章，有兴趣的可以到公共帐号再查看一下。

今天我们再给大家推荐一个可以将自己的 github 博客加个 ssl 的办法，这样就可以抵制很多无良的运营商在上面加入自己的广告了。支持静态 ssl 的服务目前已经有不少了，但是有些是会给你自动加广告的，会影响真实的呈现效果。那么我推荐的这个呢目前是没有添加广告的，以后会不会我没有办法保证，所以现在使用他还是可以放心的。它就是 pubstorm. pubstorm 是使用命令行的方式创建静态网站项目的。下面我以我的博客帐号添加 ssl 为例给大家介绍 pubstorm 的使用办法。

安装

首先第一步是要安装 pubstorm ，所以前提是你要安装好 nodejs 。由于公共号已经介绍过 nodejs 的安装，这里就不再介绍了，相关文章可以搜索 nodejs 。下面直接放出命令：

npm install -g pubstorm

等安装成功，我们就会得到 storm 命令。执行一下 storm ，我们就会得到如下的输入信息。

$ storm
NAME:
   storm - Command line interface for PubStorm, the easiest way to publish your HTML5 websites and apps

USAGE:
   storm [global options] command [command options] [arguments...]

VERSION:
   0.3.0-22df1bb

COMMANDS:
   signup        Create a new PubStorm account
   login        Log in to a PubStorm account
   logout        Log out from current session
   password.change    Change your PubStorm password
   password.reset    Reset your PubStorm password
   init            Initialize a PubStorm project
   config        Configure a PubStorm project
   publish, deploy    Publish a PubStorm project
   domains        List all domains for a PubStorm project
   domains.add        Add a new domain to a PubStorm project
   domains.rm        Remove a domain from a PubStorm project
   projects        List your PubStorm projects
   projects.rm        Delete a PubStorm project
   collab        Lists collaborators for the current project
   collab.add        Add a collaborator to the current project
   collab.rm        Remove a collaborator from the current project
   rollback        Rollback to a previous or a specified version
   versions        List versions of all completed deployments for a PubStorm project
   ssl.info        Show certificate information for a Pubstorm project
   ssl.set        Upload an SSL certificate and a private key for a PubStorm project
   ssl.rm        Remove an SSL certificate and a private key for a PubStorm project
   ssl.force        Enable or disable forced SSL/HTTPS
   ssl.letsencrypt    Setup SSL/HTTPS on a domain with a free SSL certificate from Let's Encrypt
   reinit        Re-initialize a PubStorm project
   protect        Protect your PubStorm project by HTTP basic authentication
   unprotect        Disable protection for your PubStorm project
   env            List js environment variables for a PubStorm project
   env.set        Set one or more js environment variables
   env.rm        Unset one or more js environment variables
   repo.link        Link the current project to a GitHub repository so that pushes to the repository will publish your project
   repo.unlink        Unlink the current project from its GitHub repository
   repo.info        Displays the linked GitHub repository information and setup instructions
   help, h        Shows a list of commands or help for one command

GLOBAL OPTIONS:
   --help, -h        show help
   --version, -v    print the version

这里的 signup, login, publish, init, ssl.letsencrypt 都是我们需要用到的命令。其它命令由于跟本期的内容关系不大，所以不会详细介绍，有兴趣的同学可以自行试探。

在上传我们的代码并安装 SSL 之前，我们需要注册帐号。命令如下：

storm singup

成功执行后会出现如下的画面：

$ storm signup
     ____        __   _____ __
    / __ \__  __/ /_ / ___// /_____  _________ ___
   / /_/ / / / / __ \\__ \/ __/ __ \/ ___/ __ `__ \
  / ____/ /_/ / /_/ /__/ / /_/ /_/ / /  / / / / / /
 /_/    \__,_/_.___/____/\__/\____/_/  /_/ /_/ /_/ 

Join PubStorm, the easiest way to publish your HTML5 websites and apps!

By creating an account, you agree to the following:-

  * PubStorm Terms of Service - https://www.pubstorm.com/terms-of-service
  * PubStorm Privacy Policy - https://www.pubstorm.com/privacy-policy

这个时候输入邮件与密码,你会得到下面的输出：

Enter Email: name@domain.com
Enter Password: 
Confirm Password: 
[Info] Your account has been created. You will receive your confirmation code shortly via email.

当看到最后一行的输出时，你的帐号就创建成功了。这时你需要到你的邮箱去激活一下你的帐号。激活成功后我们就可以登录了。

由于目前 pubstorm 还没有对应的 Web 登录后台，所以我们只能通过命令行登录。下面我们进入登录环节。

登录的命令很简单：

storm login

成功后会出现：

$ storm login
     ____        __   _____ __
    / __ \__  __/ /_ / ___// /_____  _________ ___
   / /_/ / / / / __ \\__ \/ __/ __ \/ ___/ __ `__ \
  / ____/ /_/ / /_/ /__/ / /_/ /_/ / /  / / / / / /
 /_/    \__,_/_.___/____/\__/\____/_/  /_/ /_/ /_/ 

Welcome back to PubStorm, the easiest way to publish your HTML5 websites and apps!

Enter your PubStorm credentials

Enter Email:

这个时候输入你刚才的帐号与密码，成功登录后会出现这样输出：

Enter Email: xxx@xxx.com
Enter Password: 
[Info] You are logged in as xxx@xxx.com.

这样就表示你已经登录成功了。

初始化

当我们登录成功后我们就可以初始化我们的项目了。首长我们要进入我们相要上传的项目目录。然后执行：

storm init

这时会出现提示：

Set up your PubStorm project
Enter Project Path (path to be deployed): [.]

这时通常你可以直接回车，进入下一步。但是如果你发现你的目录不是当前目标，你还可以输入你的实际项目的目录。当你的路径确定后，你就可以输入你自己的项目名称了：

Enter Project Name: xxx

回车后，就会出现如下的提示：

[Info] Successfully created project "xxx". 
[Info] Saved project settings to "pubstorm.json". This file should not be deleted.

这时表示你的项目 xxx 的初始化已经成功。并创建了 pubstrom.json 这个文件配置你的项目信息。同时提示不要删除这个.json 文件。否则你可能需要比较麻烦的再重建一次。

上传

当我们的初始化完成后，我们就可以上传文件了。上传的过程也很简单，命令如下：

storm publish

成功运行后，会出现如下的提示：

Scanning "/xxx"...
[Info] Bundling xxx files (xxx MB)...               

Packing bundle "xxx"...
[========================================] 100.0%

Uploading bundle "xxx" to PubStorm Cloud...
[========================================] 100.0%

Launching v1...  
[Info] Successfully published "xxx" on PubStorm Cloud. 
=> xxx.pubstorm.site

这样，你的代码就上传成功了。通常访问： http://xxx.publish.site 就可以看到你的网站的效果了。

xxx 表示你的项目名

对于我的项目来说：地址是： http://blog-3gcnbeta.pubstorm.site/

配置域名

这时我们需要配置一下我们自己定义的域名，命令行如下：

storm domains.add

配置成功会出现如下的提示：

Enter Domain Name to Add:

然后输入你自己的域名： xxx.com 这里我输入的是 blog.3gcnbeta.com 输入完成后，回车。就会得到如下的提示：

[Info] Successfully added "blog.3gcnbeta.com" to project "xxx". 

[Info] Please add the following records to the DNS configuration for the domain "3gcnbeta.com":-

  * CNAME (Alias): xxx ---> xxx.pubstorm.site 

[Info] For more information on DNS configuration, please visit https://help.pubstorm.com/getting-started/custom-domains/

这时我们得到了一个 CNAME 的配置信息。根据提示我们在 DNS 的记录里创建一个新的 CNAME 记录，并指向 pubstorm 对应的域名就可以了。关于 CNAME 的配置不再这里详细的讲解了，有兴趣的同学讲自行搜索。

配置完成后，你应该就能访问到 http://xxx.domain.com 了。这样你的网站就已经上线了。下面我们再来添加 https 服务

添加 ssl/https

pubstorm 支持自己定义的 ssl 信息，也支持 letsencrypt 的 ssl 。所以对于大部分使用 github 的小伙伴们来说，肯定是优先选择 letsencrypt 的 ssl 。因为他是免费的。所以我们在这里只介绍 letsencrypt 的 https 方式。方法很简单还是命令：

storm ssl.letsencrypt

调用成功后会出现下面的提示：

Enter Domain Name:

输入你的博客网址即可。比如我这里输入的是：

blog.3gcnbeta.com 输入网址后，会出现下面的画面：

Requesting a certificate from Let's Encrypt for blog.3gcnbeta.com...
[Info] Successfully installed a Let's Encrypt certificate for https://blog.3gcnbeta.com/.

看到 Info 里的 Successfully 时，表示 https 协议的配置已经完成了。这时你就可以通过 https 打开你的网址了。我这里对应的可以打开:

https://blog.3gcnbeta.com 这样 HTTPS 就已经安装好了。如果你想强制 http 转到 https ，可以执行一下

$ storm ssl.force
[Info] Forced SSL/HTTPS has been enabled.

如果想取消，执行一下：

$ storm ssl.force off
[Info] Forced SSL/HTTPS has been disabled.

即可。

关联 github 源码

如果你想在每次 github 更新后，你的网站都会自动更新，那么你可以执行一下：

storm repo.link

成功后会出现输入信息：

Linking a GitHub repository to a project will allow you to automatically publish it when you push to the repository.
[Info] This only works for public GitHub repositories. Also, please check in the pubstorm.json file to your repository. 
Enter GitHub repository URL:

我这里输入的是：

https://github.com/calidion/calidion.github.io.git 然后选择你的分支：

Enter branch [master]:

如果项目是在 master 上，你可以直接回车。正确输入后就会有如下的结果。

[Info] Successfully linked project to "https://github.com/calidion/calidion.github.io.git@master" 
Setup Instructions:
1. In your GitHub account, go to the https://github.com/calidion/calidion.github.io.git repository. Click on the Settings tab.
2. Click on Webhooks & services in the left navigation, then click the Add webhook button.
3. Enter https://api.pubstorm.com/hooks/github/xxx as the Payload URL. Ensure that the Content type is application/json.
4. Enter xxxxxxx in the Secret field. This will ensure that only GitHub can trigger the publishing of your project.
5. Choose Just the push event (only push events are currently supported). Click the Add webhook button when done.

这里会出现几个安装指导，如果对英语没有问题的同学可以直接根据英文安装。如果对于英语不是很理解，这里做一个简单的翻译：

到你的项目源码库上，点击 settings 。点击左边栏的 Webhooks & services 后再点击 Add webhook 按钮。在 Payload URL 里输入 https://api.pubstorm.com/hooks/github/xxx 。确保 Content type 的值是： application/json 。在 Secret 栏里输入 xxxxxxx 。再选择 Just the push event 选项，然后再点击 Add webhook 完成。配置完成后，只要你的源码有更新，你的网站就可以自动更新了。

enjoy!!

如果你还不如知道如何在 github 上建博客，并且希望我们能够介绍如何在 github 写博客或者建网站，欢迎在公共号里回复：

GP 如果回复的用户多，我们将会推出介绍如何在 github 上建网站或者博客的文章。

如果你有其它的方面的需求，也欢迎回复我们的公共帐号。如果我们熟悉或者呼声高，我们就会满足你的要求。

如果想持续接收最新的关于前端， nodejs ，微信开发， Web 开发相关的信息，欢迎关于公共号： frontedn-guru. 或者长按 /扫描二码码