残灯飞雪 的博客地带

生活依旧美好,人生还需前行!

0%

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

2021,MinTools.cn正式开放ShowDoc文档在线协同平台,并免费提供在线服务!

  • ShowDoc官网的托管服务开始商业化收费、并增加使用限制,我们在云服务器上提供相同的、且免费的托管服务。
  • 我们将与ShowDoc官网ShowDoc开源项目仓库保持同步更新,提供在线服务。

ShowDoc简介:ShowDoc是一个提供在线文档(Markdown语法为主)、Excel表格、API接口文档(包括接口调试/自动生成API文档)、文档协同编辑与在线分享的开源项目。
公网服务地址:http://www.mintools.cn:4999/

Tips:

  1. 注册时,账号名建议直接使用**[中文]**,方便好记!
  2. 忘记登录密码,可在添加页面下方微信,进行密码重置

1. ShowDoc是什么

  • ShowDoc是一个非常适合IT团队的在线API文档、技术文档工具。
  • 通过showdoc,你可以方便地使用markdown语法来书写出美观的API文档、数据字典文档、技术文档、在线excel文档等等。
  • 如果不想编辑markdown文档,你还可以利用showdoc的自动化能力,从程序注释中自动生成API文档,或者从搭配的RunApi客户端(类似postman的api调试工具)中一边调试接口、一边自动生成文档。
  • 通过分配项目成员和团队成员,你可以很方便地进行项目文档的权限管理和团队协作,也可以分享文档出去给朋友查看。
  • ShowDoc还支持多平台客户端,有win客户端、mac客户端、ios、android等,更方便跨平台使用。
  • 目前超过100000+的互联网团队正在使用showdoc,包括知名公司内部的一些团队,比如腾讯、华为、百度、京东、字节跳动等等。

2. 它可以用来做什么

  • API文档( 查看Demo
    • 随着移动互联网的发展,BaaS(后端即服务)越来越流行。服务端提供API,APP端或者网页前端便可方便调用数据。用ShowDoc可以非常方便快速地编写出美观的API文档。
  • 数据字典( 查看Demo
    • 一份好的数据字典可以很方便地向别人说明你的数据库结构,如各个字段的释义等。
  • 说明文档 ( 查看Demo
    • 你完全可以使用showdoc来编写一些工具的说明书,也可以编写一些技术规范说明文档以供团队查阅。

3. 它都有些什么功能

  • 分享与导出
    • 响应式网页设计,可将项目文档分享到电脑或移动设备查看。同时也可以将项目导出成word文件,以便离线浏览。
  • 权限管理
    • 公开项目与私密项目
      • ShowDoc上的项目有公开项目和私密项目两种。公开项目可供任何登录与非登录的用户访问,而私密项目则需要输入密码验证访问。密码由项目创建者设置。
    • 项目转让
      • 项目创建者可以自由地把项目转让给网站的其他用户。
    • 项目成员
      • 你可以很方便地为ShowDoc的项目添加、删除项目成员。项目成员可以对项目进行编辑,但不可转让或删除项目(只有项目创建者才有权限)。
    • 团队管理
      • 利用showdoc的团队功能你可以更好地进行团队协作。
  • 编辑功能
    • markdown编辑
      • ShowDoc采用markdown编辑器,无论是编辑还是阅读体验都极佳很棒。如果你不了解Markdown,请在搜索引擎搜索”认识与入门 Markdown”。
    • 模板插入
      • 在ShowDoc的编辑页面,点击编辑器上方的按钮可方便地插入API接口模板和数据字典模板。插入模板后,剩下的就是改动数据了,省去了很多编辑的力气。
    • 历史版本
      • ShowDoc为页面提供历史版本功能,你可以方便地把页面恢复到之前的版本。
  • 多平台
    showdoc支持网页版、手机app版和电脑客户端版。客户端地址可见:https://www.showdoc.com.cn/clients
  • 自动化
    • 可从代码注释中自动生成文档
    • 搭配的RunApi客户端,可调试接口和自动生成文档

4. 使用在线的ShowDoc

  • 如果你没有自己的服务器,但又想使用ShowDoc作为分档分享工具,你可以使用在线的ShowDoc http://www.mintools.cn:4999/
  • 在线showdoc作为在线服务会长期维护,请放心托管数据。

5. ShowDoc交流群

  • 可添加微信,邀请进交流群。
  • 如忘记登录密码,可添加微信,进行密码重置。
    添加企业微信

6. API接口调试客户端

  • RunApi官方介绍
    RunApi是一个以接口为核心的开发测试工具(功能上类似一个简化版的postman)。目前有客户端版(推荐,支持win和mac平台)和在线精简版 ,包含接口测试/项目协作等功能。
    它和ShowDoc相辅相成:ShowDoc以文档为核心,侧重文档编写和知识资料沉淀。而RunApi则以接口为核心,包含接口测试、管理等一系列功能。同时它将自动生成文档到ShowDoc,以及共用ShowDoc的团队管理机制,很好地实现接口的自动化和多人协作。相信使用 ShowDoc + RunApi 这两个工具组合,能够极大地提高IT团队的效率。

  • 客户端下载地址

  1. Windows版 – 点击下载
  2. Mac版 – 点击下载
  3. Android版
  4. IOS版
  • 在线精简版,访问地址: http://runapi.showdoc.cc
    在线精简版和客户端版差别很大,它只包含简单的接口请求以及生成markdown代码,只用作简单调试,无法自动生成文档到ShowDoc以及无法使用项目团队协作功能等。

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

1. Python背景以及特点

1.1 Python的历史

1989年底发明,1991年第一个公开发行版。
Python开发者的哲学“用一种方法,最好只有一种方法来做一件事”。

1.2 Python的特点

简单、简洁、易学、优雅、解释性、支持面向过程和面向对象
丰富的库、免费、开源、可移植性、可扩展性、较低的开发调试成本
缺点:速度不如C/C++

2. 语法要素

  1. 使用不同的缩进代替{}作为函数和语句块的分界线

  2. 使用#作为注释符号

  3. 三种引入方式
    import modulename
    from modulename import*
    from modulename import XXX

  4. 函数
    支持递归、默认参数值、可变参数
    不支持函数重载
    函数定义def开始,:结束,函数无需声明
    image.png

  5. 变量类型
    采用动态类型系统,强变量类型
    Str、ListTuple、Set、Dict、Int、Float、Bool、Complex

  6. List类型
    image.png

  7. Tuple类型
    image.png

  8. Dict类型
    image.png

  9. 流程控制语句
    image.png

3. 面向对象特性

  1. 类的定义
    image.png

4. Python开发环境搭建,常用Python IDE介绍

下载:www.python.org
安装
配置环境变量
Pycharm等IDE工具

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

1. 介绍

NPM镜像源还是蛮多的,有时候我们需要切换NPM镜像。相比每次切换时都手动指定相应参数,使用nrm实现快速切换要方便的多。

比如,除了国内的cnpm、taobao,还有国外的NPM镜像,而且不同地区访问不同的镜像速度也可能有差异,各个镜像各自都可能有少数包暂时没有同步。

nrm 是一个 NPM 源管理器,允许快速地在以下 NPM 源间切换:

npm
cnpm
strongloop
european
australia
nodejitsu
taobao

2. 安装

1
$ npm install -g nrm

3. 使用

列出可选的源

1
2
3
4
5
6
7
8
9
$ ; nrm ls                                                                                                                                    

* npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - http://registry.npm.taobao.org/
eu ----- http://registry.npmjs.eu/
au ----- http://registry.npmjs.org.au/
sl ----- http://npm.strongloop.com/
nj ----- https://registry.nodejitsu.com/

带 * 的是当前使用的源,上面的输出表明当前源是官方源。

4. 切换

切换到taobao

1
2
3
$ ; nrm use taobao

Registry has been set to: http://registry.npm.taobao.org/

5. 增加源

可以增加定制的源,特别适用于添加企业内部的私有源,私有源可以使用cnpmjs架设。

1
$ nrm add  <registry> <url> [home]

6. 删除源

1
$ nrm del <registry>

7. 测试速度

还可以通过nrm test测试相应源的响应时间。

例如,测试官方源的响应时间:

1
2
3
$ ; nrm test npm

npm ---- 1328ms

测试所有源的响应时间:

1
2
3
4
5
6
7
8
9
$ ; nrm test                                                                                                                                   

npm ---- 891ms
cnpm --- 1213ms
* taobao - 460ms
eu ----- 3859ms
au ----- 1073ms
sl ----- 4150ms
nj ----- 8008ms

【注意】为了取得较准确的结果,可以考虑多次测试取平均值。

8. 许可

nrm 为开源软件,使用 MIT 许可。

9. 项目主页

github.com/Pana/nrm

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

1. Github常用的命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# git本地仓库初始化
$ git init Initialized empty Git repository in /d/toolsWorkspaces/Demo/.git/
# 将本地项目的所有文件添加到暂存区中
$ git add .
# 将暂存区的文件提交到git本地仓库
$ git commit -m "注释语句"
# 将本地仓库关联到Github
$ git remote add origin Github仓库项目https网址
# 查看当前是否在master
$ git check master
# 将代码由本地仓库上传到Github远程仓库
$ git push -u origin master
# 撤销修改
$ git checkout -- file
# 删除文件
$ git rm file
# 查看状态
$ git status
# 添加记录
$ git add file 或 $ git add .
# 添加描述
$ git commit -m "miao shu nei rong"
# 同步数据
$ git pull
# 提交数据
$ git push origin name
# 查看分支
$ git branch
# 创建分支
$ git branch name
# 切换分支
$ git checkout name
# 创建+切换分支
$ git checkout -b name
# 合并某分支到当前分支
$ git merge name
# 删除分支
$ git branch -d name
# 删除远程分支
$ git push origin :name

2. 设置Git身份信息

在安装完Git后,第一步就是设置Git身份信息:

1
2
$ git config --global user.name "myusername"    #用户名
$ git config --global user.email "myemail" #邮箱

如要查看用户:

1
$ git config --list

【可能遇到的问题】
配置SSH keys密钥后,ssh -T git@github.com检验SSH已经配置好,返回结果如下:

1
Hi xxxxxx! You've successfully authenticated, but GitHub does not provide shell access.

但是,当上传本地仓库代码到远程仓库时,总是失败,提示如下情况时,则是要做本步骤提到的设置Git身份信息:

1
2
3
4
5
6
7
Unable to auto-detect email address (got 'Arreane@Arreane-PC.(none)')
*** Please tell me who you are.
Run
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository

3. 给Git命令起别名:

别名用起来很简短顺手,如把git status -> git st,使用如下命令:

1
$ git config --global alias.st status

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

摘要

上章主要讲在GitHub上搭建好博客网站部分,在网页部分主要通过上传开源的项目文件先直接部署以正常显示,或者直接跳过使用GitHub生成的主题。所以,在本章我们来详细讲解用Hexo部署开源博客网站,以及日常如何写博客文章等。

比较流行的一些静态博客框架有Jekyll、Hexo、FarBox、Simple、Octopress、Pelican等等,这些静态程序可以说都有各自的亮点,但最后我选择了Hexo来搭建自己的博客,主要原因是:Hexo基于Node.js实现,在Windows上安装Node.js开发环境简单,而且Hexo的开源主题也很多很好看。
【PS:如果愿意自己买个阿里云之类的云主机,然后搭载Wordpress建立博客也是很不错的方案,不过不在本章介绍范围,以后会为亲们详解。】

整个流程都是自己摸索后的操作过程记录,真实案例,操作简单,适合没有开发经验的小白。如有不明白的地方,欢迎到 blog.mintools.cn 留言询问。

完成效果

image

image

参考资料

Git、GitHub相关教程http://www.runoob.com/git/git-tutorial.html
Node.js相关教程http://www.runoob.com/nodejs/nodejs-tutorial.html
Hexo官方中文文档https://hexo.io/zh-cn/docs/
NexT开发文档http://theme-next.iissnan.com/
Markdown 语法说明(简体中文版)http://wowubuntu.com/markdown/

总体思路

  1. 搭建环境
  2. 安装和配置Hexo
  3. 更换喜欢的主题
  4. 配置SSH keys密钥
  5. 部署到GitHub
  6. 创建和发布文章等基本操作

1. 搭建环境

由于GitHub有些功能依赖Git实现,而Hexo是基于Node.js实现的,所以在开始前需要安装好Git、Node.js、Hexo,并了解一些相关基础知识。

Git、GitHub相关教程(http://www.runoob.com/git/git-tutorial.html
Node.js相关教程(http://www.runoob.com/nodejs/nodejs-tutorial.html
Hexo官方中文文档(https://hexo.io/zh-cn/docs/

1.1 安装Git

安装Git For Windows(或者其它git客户端),官网下载地址 https://git-scm.com/downloads ,和其他软件一样,没什么特别,就不说了。

特殊说明:

  1. Git安装成功后会有一个Git Bash,以下的命令我们都在Git Bash来执行,如换用系统自带cmd等其他命令行窗口,部分命令能够执行,但很多情况会不能成功执行或报错,如配置SSH等。
  2. 本文章命令行的书写规则是 $ +命令,如 $ npm install -g hexo-cli,其中开头字符 $ 只是声明这是条命令,只需复制 $ 后面部分的命令到Git Bash执行。

1.2 安装Node.js

安装Node.js,官网下载地址 https://nodejs.org/en/ ,也是正常安装即可。

2. 安装和配置Hexo

2.1 安装Hexo

上面的环境配置成功以后,你就可以通过cmd命令行使用npm来安装Hexo了。只需输入下面的一行命令,等待安装完成。

1
$ npm install -g hexo-cli

image

2.2 初始化Hexo

在电脑的某个地方新建一个名为hexo的文件夹(名字可以随便取),比如以我的是D:\toolsWorkspaces\Hexo为例,由于这个文件夹将来就作为你存放代码的地方,所以请确定好合适的位置,不要随便乱放。然后我们运行下面的命令进行初始化。

1
2
3
$ cd /d/toolsWorkspaces/Hexo/
$ hexo init
$ npm install

image

Hexo初始化会自动下载一些文件到这个目录,包括node_modules,目录结构如下图:

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── node_modules
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

image

image

2.3 生成静态文件

1
2
3
$ hexo g
# 或者
$ hexo generate

2.4 启动服务预览

启动服务,就可以在本地打开 http://localhost:4000/ 预览了,出现下图证明Hexo安装成功。

1
2
3
$ hexo s
# 或者
$ hexo server

image

3. 更换喜欢的主题

3.1 下载主题

Ctrl+C关闭server服务器,然后在官网 或者 https://github.com/hexojs/hexo/wiki/Themes 选择需要的主题。

我博客使用的主题为NexThttps://github.com/theme-next/hexo-theme-next ),以此为例。

1
2
3
$ git clone  https://github.com/theme-next/hexo-theme-next themes/next
# NexT项目搬迁前地址,当前存在的最新版本为v5.1.4,后搬迁到theme-next组织下,继续v6、v7的开发
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

image

3.2 启用主题

修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为上面的next。具体操作为,打开创建的Hexo目录下的_config.yml这个配置文件,然后找到# Extensions这个关键字,下面有theme: landscape这一行,把这一行改为theme: next即可。修改设置后,如果在浏览器中没有看到想要的效果,使用($ hexo clean)来清除缓存,然后重新生成静态文件。

1
2
3
$ hexo clean
$ hexo g
$ hexo s

启用新的主题后,界面如下图(因为漂亮页面还需要配置图片参数等,所以界面是最初的白净版本):
image

3.3 NexT主题介绍

我博客使用NexT主题的原因第一是因为喜欢,第二是因为创建者做了详细的使用和二次开发文档,详情请查看NexT开发文档(http://theme-next.iissnan.com/ ) ,后期可以根据文档学习主题配置方法,修改出自己风格独特的博客,在此不再累述,如若有疑问可在我的博客 blog.mintools.cn 留言,我会为大家解答这一部分内容。

新下载的NexT主题需要自行配置图片等才会好看,所以如若你觉得修改主题这么繁琐的一件事不值得花费时间,也可以直接下载我的主题,配置更换即可。

4 配置SSH keys密钥

PS:此步骤的所有命令都必须使用Git Bash来执行。

4.1 检查现有的SSH密钥

检查目录是否已经有一个公共SSH密钥,公共密钥的文件名一般为 id_dsa.pub 或 id_ecdsa.pub 或 id_ed25519.pub 或 id_rsa.pub。

1
$ ls -al ~/.ssh

image

4.2 第一次使用Git创建新SSH密钥

执行下面命令生成SSH,敲三次回车,既可以生成id_rsa.pub文件,里面就是SSH keys的内容。

1
$ ssh-keygen

image

4.3 配置SSH keys到GitHub

  1. 打开文件管理器(就是平时打开我的电脑的文件夹),找到C:\Users\frank\ .ssh\id_rsa.pub这个文件,用记事本打开,复制里面的内容。

  2. 打开你的github官网,登陆后点击右上角头像弹出下拉栏里,点击Setting进入设置,点击SSH and GPG keys设置,点击New SSH keys添加刚刚复制的SSH密钥,Title备注自己能分清楚就好。
    image

image

  1. 检验SSH是否配置好
1
$ ssh -T git@github.com

image

5 部署到GitHub

Hexo 提供了快速方便的一键部署功能,第一次配置好之后只需一条命令就能将网站部署到服务器上。

5.1 安装hexo-deployer-git

1
$ npm install hexo-deployer-git --save

image

image

5.2 修改_config.yml配置

repo: 的地址在GitHub的代码仓库下载处获取,选择SSH方式的链接,而非HTTPS方式链接,比如我的git@github.com:Elvis-Rothschild/Elvis-Rothschild.github.io.git,如下图所示。
image

[branch]在没有建立分支前使用master。
[message]是自定义提交信息 (默认为 Site updated: ‘YYYY-MM-DD HH:mm:ss’),可以不写此行。

1
2
3
4
5
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]

image

5.3 上传之前

在上传代码到GitHub前,可以把GitHub上以前所有代码下载下来(虽然GitHub有版本管理,但备份一下总是好的),因为Hexo提交代码时会把以前的代码删掉。

5.4 把本地博客部署到GitHub

在上传网站到GitHub前,最好先清除缓存($ hexo clean),然后重新生成静态文件($ hexo g),最后再上传部署($ hexo d)。到此,新主题的博客已经发布成功了。

1
2
3
4
5
$ hexo clean
$ hexo g
$ hexo d
# 或者
$ hexo deploy

image

5.5 注意保留CNAME、README.md等文件

  1. 提交之后网页上一看,发现以前其它代码都没了,此时不要慌,一些非md文件可以把他们放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录的:
    image

  2. Hexo默认会把所有md文件都转换成html,包括README.md,所有需要每次生成之后、上传之前,手动将CNAME、README.md复制到public目录,并删除README.html。

6 创建和发布文章等基本操作

6.1 创建新文章

首先,在Git Bash中进入Hexo文件夹($ cd /d/toolsWorkspaces/Hexo/),然后创建新文章($ hexo new “文章标题”),就可以在/Hexo/Source/_post目录下看到你新创建的那个文章的md文件。

1
2
3
$ cd /d/toolsWorkspaces/Hexo/
$ hexo new [titlename]
# 如使用 hexo new hello 命令,创建名为hello.cmd的文件。

6.2 编辑md文件(Markdown)

Markdown是一个被程序猿和作者们广泛使用的一种书写标志语言,很好懂,减少排版工作,十分方便。
Markdown 语法说明(简体中文版)http://wowubuntu.com/markdown/

6.3 重新上传部署网站

先清除缓存($ hexo clean),然后重新生成静态文件($ hexo g),最后再上传部署($ hexo d)。

1
2
3
4
5
$ hexo clean
$ hexo g
$ hexo d
# 或者
$ hexo deploy

6.4 成功发布

到此,写好文章的博客也已经发布成功了。大功告成,我刚开始发布的博客的如下图:
image

image

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

其他精彩文章:

使用Hexo在GitHub Pages上搭建部署免费的个人博客网站(上:GitHub搭建)——最详细全面解读教程(没有之一)

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

即将毕业的大四狗,一直想做一个自己的博客网站,用来管理和分享知识,当然这也是一张展示自己的名片,一份精彩全面的简历,毕竟在某种程度上展示着个人的能力、经验、经历,体现了个人知识的深度和广度。

摘要

本章主要讲在GitHub上搭建好博客网站部分,在网页部分主要通过上传开源的项目文件先直接部署以正常显示。我会在下章详细讲解用Hexo部署开源博客网站,以及在后期日常如何写博客文章等。

接下来,我会详细介绍搭建个人网站的具体流程、以及可能会遇到的问题,从注册一个域名(可独立访问的路径网址),到创建一个空间并编写一个网站代码,然后绑定域名、设置域名解析,可以通过域名正常访问这个网站。

整个流程都是自己摸索后的操作过程记录,真实案例,操作简单,适合没有开发经验的小白。如有不明白的地方,欢迎到 blog.mintools.cn 留言询问。

完成效果

image

总体思路

  1. 购买域名
  2. 创建GitHub个人网站项目和代码仓库
  3. 上传个人网站网页到GitHub仓库
  4. 绑定域名,并设置域名解析,关联域名和网站代码仓库

具体步骤

1. 购买域名

1.1 向域名服务提供商购买域名

国内:万网(被阿里云收购在旗下)、腾讯云新网
国外:GoDaddy(狗爹爹的广告真心多)等

域名可以从这些域名服务提供商进行购买,价格上综合比较之后,阿里云和腾讯云的价格是最便宜的,特别是阿里云。虽然狗爹爹的首年费用比阿里云还低,但是第二年开始以后的续费相当贵,所以价格上还是阿里云最棒,况且阿里云的域名服务也是很好的,毕竟收购了国内巨头的万网。

点击此处可以免费领取阿里云产品的优惠券

在域名查询栏中搜索自己想要的域名,域名查询没有被注册的话,就可以直接加入清单购买了。
image

image

登录阿里云账户,进行购买、付费操作。相信大家都要淘宝账号,可以直接使用账号登录的,很方便。
image

购买确定订单时,注意要选择域名持有人信息(个人还是企业),还有阿里云会赠送免费版的企业邮箱,可以开通50个邮箱账号,且每个账号有5G邮箱容量和2G网盘容量。
image

image

付费建议直接支付宝,快捷方便。
image

购买成功后,域名会进入域名实名认证,如果是个人,只需填写身份证之类简单个人实名信息,大约等待1~3天就好了,我的只用了不到1天就通过了。如果是企业就需要营业执照副本或者组织结构代码证之类,需要材料较多。我想看本篇文章的小白们大都是个人的吧。
image

1.2 温馨提示1

购买域名的时候需要进行实名认证,搭建网站还要买主机,然后就要将域名和主机一起进行审核备案了。有很多的小伙伴听说国际域名绑定境外的主机是不需要备案的,觉得很棒棒,但是国内的备案,备案审核速度虽说有点慢的,3~15天就好,上传证件之类的也要花点时间,不够自由。但是如果网站的目标群体主要是国内用户的话,还是老老实实备案注册,免得到时候被限制访问。
(PS:当然本篇文章介绍的用GitHub,所以不需要购买主机。)

空间有免费空间,也有收费空间。免费的不够稳定,而且大都是不安全的,有的甚至在你的网站上加广告,所以如果是搭建其他网站需要购买主机,还是建议大家买正规的,比如阿里云、华为云的。

当然,如果真说又免费又稳定的空间的话,GitHub算是这样的存在。GitHub允许上传个人网站项目并自定义域名,而且又有稳定的服务,的确是最好的选择。所以国内现在也有很多类似的服务,例如GitCafe、coding、CSDN的CODE、开源中国OSChina等,但GitHub依旧是主流存在。

2. 创建GitHub个人网站项目和代码仓库

2.1 GitHub简介

GitHub(https://github.com/ ) 是一个面向开源及私有软件项目的托管平台(或者说远程代码仓库)。GitHub是一个全世界程序员聚集起来的地方,大家互相分享自己的代码,提升别人,也提升自我。大家都在为着开源社区努力着。

这里我们使用GitHub上的开源项目搭建个人博客,无需购买服务器,所以没有数据库访问,很适合建立自己的博客或者个人网站,当然简单公司介绍静态网站也是可以的,但大型网站、动态网站是不支持的。

想要了解GitHub的基础用法,可以简单查看 [从0开始学习 GITHUB 系列之初识 GITHUB][从0开始学习 GITHUB 系列之加入 GITHUB],语言通俗易懂,讲的也基础简单,可以初步了解一下GitHub。

2.2 注册GitHub账号

使用GitHub,首先需要拥有一个GitHub账号,没有的赶紧注册一个,超级好用,而且对于一个优秀程序猿的必备,有的公司甚至将此列入招聘要求。

在注册页面需要填用户名、邮箱、密码,这个用户名如果你填写的是username,以后在GitHub 搭建博客的时候默认生成的博客地址就是 http://username.github.io ,所以给自己取个好点的用户名吧。

现在已经有了github账号,且用户名是username.
image

2.3 创建仓库,新建个人网站项目

登录GitHub之后,点击New repository创建项目仓库。
image

由于我们是搭建的是一个 个人网站项目,所以仓库的名称需要按照个人网站项目的规定,Repository name设置为 username.github.io。这是GitHub分配给每个用户的GitHub Pages地址,要使用它只用新建一个名字为 username.github.io 的仓库就行了,仓库里面存放你的个人主页代码。例如,我的GitHub用户名是Elvis-Rothschild,那我就要填写 Elvis-Rothschild.github.io。然后选择公开模式,接着点击创建仓库按钮。
image

仓库建好之后,应该是这样的。进入了项目主页面,点击设置点击settings按钮。
image
进入settings页面,选择一个模板,点击【Choose a theme 】来发布生成主题页面。
image

image

image

现在我们在github上的主页就搭建完成了,只要在地址栏输入 username.github.io 就可以访问你的主页了。
image

温馨提示2

尽管GitHub个人网站项目是免费的,但还是有一些限制的,不过对大多数人来说,完全够用了。

  1. 单个仓库大小不超过1GB,上传单个文件大小不能超过100MB,如果通过浏览器上传不能超过25MB
  2. 个人网站项目也不例外,最大空间1GB
  3. 个人网站项目每个月访问请求数不能超过10万次,总流量不能超过100GB
  4. 个人网站项目一小时创建数量不能超过10个

当然了,这些政策可能随时改变,可以通过此网页查看最新政策。
https://help.github.com/articles/what-is-github-pages/#recommended-limits

3. 上传个人网站网页到GitHub仓库

3.1 编写网站代码(或用开源的网站项目)

自动生成的页面,肯定是不完美的,我们希望能够自己设计自己的个人网站。因此,我们可以自己设计编写一个网页文件,命名为index.html。然后上传到GitHub个人网站项目上就可以了。
image

当然,如果你目前没有编写能力,GitHub上也有很多开源的项目。要知道GitHub是全世界最大的开源项目社区,关于网站制作的项目非常多。比较著名开源主题有hexo、jekyll等。我使用是开源项目NexT主题。

这里,你也可以先拷贝我的,进入我的项目 https://github.com/Elvis-Rothschild/Elvis-Rothschild.github.io/new/master ,然后下载源码。解压之后,拿到里面的index.html文件。
image

image

实在不行,这步可以跳过,就先用GitHub生成的主题模版,只要能正常显示就可以,在下章会为大家详细讲解用Hexo部署自己的博客网站。

3.2 上传index.html文件

进入个人网站项目主页,点击上传文件Upload files按钮,进入上传文件页面,将index.html文件拖入蓝色大圈圈区域,点击提交按钮即可提交成功。此时打开网址 username.github.io 就可以看到主页已经改变为新上传的网页了。
image

当然,为了防止自己编辑的内容与拷贝来的有冲突,可以点击右上角的fork,创建该项目的一个分支,自己进行编辑,自己编辑的内容不会和项目创建者的版本相冲突。

4. 绑定域名,并设置域名解析,关联域名和网站代码仓库

网页上传成功了,GitHub为我们每个注册的用户提供了一个唯一的 username.github.io 网址,GitHub服务器会帮我们托管这个 username.github.io 所用到的全部代码,自动运行,所以我们就不需要购买服务器或者云主机来自己运行了。但是,我们之所以购买域名,就是不想总是通过 username.github.io 来访问我们的个人网站,而是希望通过自己的独立域名来访问。

那么,我们就一起来把 username.github.io 和自己购买的域名相关联吧。

4.1 在GitHub端将域名绑定到 username.github.io

点击我们的个人网站项目设置进入settings按钮,进入settings页面,找到【Custom domain】选项,输入我们在阿里云上购买的域名,然后点击Save保存。完成后返回到仓库,可以发现多了一个叫CNAME的文件,其内容就是刚才填写的在阿里云上购买的域名。
image

4.2 fork分支项目设置(未创建fork则跳过)

如果创建了fork分支项目,那么还需在设置里将fork项目名称修改为 username.github.io。
image
同时,在该项目下新建文件,命名为CNAME,内容为在阿里云上购买的域名。

4.3 在域名端将DNS指向 username.github.io

接着,我们还要将购买的域名解析到这个网站项目上。打开阿里云管理控制台,进入域名解析设置界面,点击添加解析。
image

进入如下页面,添加如下信息:

记录类型:CNAME,主机记录:@,记录值一定要是 username.github.io,TTL:一般都是10分钟。
image

稍等片刻,域名解析就会生效。

4.4 解析成功

解析成功,你的网站就建立成功了。在浏览器地址栏输入:http://域名(例如:http://blog.mintools.cn ),就可以转到你自己的网站了。
image

当然由于是开源的项目,此时的界面是GitHub默认主题的样式和内容,我会在下章讲解如何进一步的修改,以及往其中添加新的页面,如何进行文章的更新等等。

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

其他精彩文章:

使用Hexo在GitHub Pages上搭建部署免费的个人博客网站(下:Hexo部署)——最详细全面解读教程(没有之一)