ShipHub

# Ship-VuePress

# 一、搭建

# 1、环境准备

需要有node.js的开发环境，具体搭建可参考【Ship-Node】

# 2、开始搭建

个人喜好使用yarn操作，此文档使用yarn并以ship-blog为例：
>>新建项目文件夹：ship-blog
>>全局安装 VuePress >>> yarn global add vuepress >>> 如果使用npm则为：npm install -g vuepress
>>cmd进入项目文件：cd D:\ship-hub\ship-blog
>>初始化项目：yarn init -y >>> 【npm init -y】
>>创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下：
ship-blog
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
>>在 config.js 文件中配置网站标题、描述、主题等信息:
module.exports = {
  title: 'ship-blog',
  description: 'ship-blog',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: '前端基础', link: '/accumulate/' },
      {text: '算法题库', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};
>>在 package.json 文件里添加两个启动命令:
"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}
>>运行项目：	
yarn run dev 【npm run dev】
>>访问项目地址即可查看网页

# 二、部署

# 1、GitHubPages

官网：https://pages.github.com/

>>新建公有仓库一： USERNAME.github.io 【不用克隆到本地】
>>USERNAME 必须是 Github 的账号名称 >>> 个人的是：sp1203 >>> 【sp1203.github.io】
>>>新建仓库二：ship-blog 【克隆到本地】
>>将搭建好的项目文件拷贝到ship-blog
>>在ship-blog根目录下创建 deploy.sh 文件：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
#npm run build
yarn run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:sp1203/sp1203.github.io.git master

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

>>仓库二负责开发，仓库一负责显示网站内容，即仓库二开发完成后自动发布到仓库一
>>在 package.json 文件夹中添加发布命令
"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploylinux": "bash deploy.sh",	#linux下使用bash启动deploy.sh
    "deploywindows": "start deploy.sh"	#windows下使用start启动deploy.sh
  }

>>根据系统执行发布命令：yarn run deploywindows 【npm run deploywindows】
>>访问地址：https://sp1203.github.io/

# 三、注意事项

# 1、GitHub常见错误

>>克隆或提交项目的时候肯能出现以下错误：
Permanently added the RSA host key for IP address '13.250.177.223' to t he list of known hosts.
>>此错误为自己的GitHub没有添加公钥
>>可以用cmd运行【ssh -T git@github.com】测试下：
	存在公钥返回：Hi sp1203! You've successfully authenticated, but GitHub does not provide shell access.
	不存在则返回：Permission denied (publickey).
>>可以用cmd执行【ssh-keygen -t rsa -C "GitHub账号"】 >>> 【ssh-keygen -t rsa -C "sp1203"】，一直Enter下去生成公钥如下所示：

D:\ship-hub\ship-blog\docs\.vuepress\dist>ssh-keygen -t rsa -C "sp1203" #Enter
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\vic/.ssh/id_rsa): #Enter
Enter passphrase (empty for no passphrase):   #Enter
Enter same passphrase again:	#Enter
Your identification has been saved in C:\Users\vic/.ssh/id_rsa. 
Your public key has been saved in C:\Users\vic/.ssh/id_rsa.pub.		#公钥保存路劲
The key fingerprint is:
SHA256:0nRekE1EpF3dIc+mGRVgr4ba+spXijnsyd2lmcdROpY sp1203
The key's randomart image is:
+---[RSA 2048]----+
|          .B=+o=+|
|          .+o.* o|
|        . o o. = |
|       o o .. * .|
|      . S .. = o.|
|       .  o ..E. |
|        ..o.o..o.|
|        o=+o. =o |
|        .B=o =.  |
+----[SHA256]-----+

D:\ship-hub\ship-blog\docs\.vuepress\dist>

>>打开公钥路劲找到id_rsa.pub文件 >>> linux下可用cat命令查看内容，windows下用记事本打开即可查看内容
>>在github上添加刚刚生成的公钥
	GitHub >> 用户 >> Settings >> SSH and GPG keys >> New SSH key
>>title:随便填即可，此处为【ship-blog】
>>key:【id_rsa.pub】里的内容
>>添加完成后就能正常克隆和提交项目文件了。

# 2、使用自己的域名

>> 购买域名【www.gooder.top】 >> 解析 
>> 添加一个记录类型为CNAME，主机记录为@，解析线路默认，记录值为github的仓库名【sp1203.github.io】，TTL可选默认10分钟
  【注意】：阿里云的域名主机记录为@时，使用CNAME类型保存时会提示CNAME与MX冲突，所有依旧使用A类型，将记录值改为ip地址即可，ip地址可以通过		   ping【sp1203.github.io】获取。
>>记录类型下拉列表都有说明。若你需要你的网址有无www.都能跳转，可以再添加一个www主机记录。
>>在GitHub上添加CNAME文件
>>在仓库一 USERNAME.github.io 中找到 Settings > Custom domain 把 域名【www.shipblog.top】 添加进去即可。

image-20200928160013218