这是一个创建于 3030 天前的主题，其中的信息可能已经有所发展或是发生改变。
由于很多格式性的内容无法复杂，所以如果感觉不方便看，可以查看原文。
相信很多会玩 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: [email protected]
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: [email protected]
Enter Password:
[Info] You are logged in as [email protected].
这样就表示你已经登录成功了。
初始化
当我们登录成功后我们就可以初始化我们的项目了。 首长我们要进入我们相要上传的项目目录。 然后执行：
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. 或者长按 /扫描二码码
 |
1
calidion OP 原文堪误， pubstorm 也会添加广告，不过广告相对比较小。
|
 |
2
isCyan 2016-07-30 00:32:02 +08:00 via Android
npm install -g surge
|
 |
3
imWBB 2016-07-30 00:35:00 +08:00 via Android  1
用 cloudflare 加持 https
|
|
6
calidion OP 继续寻找免费，无广告的 https 方案。
如果谁有相关信息，欢迎告知，谢谢。 |
 |
7
fashioncj 2016-07-30 00:55:15 +08:00
coding.net 支持 https 。。
|
 |
9
withlqs 2016-07-30 01:15:05 +08:00
coding 的 pages 默认自动开 https.....是 letsencrypt 自动签证书
|
 |
10
DoraJDJ 2016-07-30 01:18:18 +08:00 via Android
GitLab.com 党默默看着
|
 |
12
mdluo 2016-07-30 02:35:15 +08:00 1
|
 |
14
Symars 2016-07-30 09:48:41 +08:00
额，没明白呢 ， github 本身不就是 https 访问的吗？
|
 |
16
DesignerSkyline 2016-07-30 10:38:06 +08:00
@Ellison Full-strict 是 CF 到 github 加密了的
|
 |
17
popu111 2016-07-30 10:57:08 +08:00
@DesignerSkyline Full 就好， strict 要验证证书的，要是 gayhub 能传自定义证书我们还需要这么折腾么。。。
|
 |
18
cielpy 2016-07-30 12:04:05 +08:00 via iPhone 1
https://imciel.com/2016/05/09/github-pages-reverse-proxy-https/
搭一个反向代理，自己配置 letsencrypt 证书，不会有广告，不过不免费 |
 |
19
davin 2016-07-30 12:04:06 +08:00
Let's Encrypt 证书不就行了，感觉这是个 AD 帖
|
 |
20
qq316107934 2016-07-30 13:13:04 +08:00 via Android
@calidion 勘误
|
|
21
calidion OP |
 |
22
ITOutsider 2016-07-30 14:23:37 +08:00
gitlab 路過
|
 |
23
yingos 2016-07-30 15:06:25 +08:00
kloudsec 可以自定义 SSl ，不过已经在本月 10 号因资金问题暂停了所有服务。
现在再用 cf ，感觉速度还不错。 site:https://www.ipz.me |
 |
24
lslqtz 2016-07-30 15:24:10 +08:00
自己开 VPS 不好吗
|
|
25
qq316107934 2016-07-31 00:04:52 +08:00 via Android
@calidion 错字提醒下，不必在意
|
|
26
calidion OP @qq316107934
呵呵。谢谢。刚明白。 |
|
31
calidion OP @lslqtz
所以你需要使用 github pages ，这样就不用花太多时间维护自己的博客。 我的博客原来也是 wordpress 的，然后要使用一个 php 服务器，特别麻烦， 经历过虚拟主机， linode, 新浪云等一堆服务器，最终在 GITHUB PAGES 找到了归宿。不过再担心 HOSTING 的问题了。 同时还可以自定义网址域多，简直是天大的福利。 |
 |
32
yexiaoxing 2016-07-31 21:34:32 +08:00 via iPad
gitlab 支持 letsencrypt
|
|
34
calidion OP |
|
35
calidion OP |
Select Language