工具分享【一】5分钟搭建自己的博客

快速搭建

1. 演示环境说明

   • git: 能访问github/gitee即可
   • node: v10.15.3
   • npm: 6.14.8

   # npm设置淘宝源
   npm config set registry https://registry.npm.taobao.org
   npm config set disturl https://npm.taobao.org/dist
   
   # 打开cmd 全局安装yarn
   $ npm i -g yarn
   
   # 设置yarn淘宝源，使用npm的同学，也是可以设置淘宝源
   $ yarn config set registry https://registry.npm.taobao.org
   $ yarn config set disturl https://npm.taobao.org/dist
   $ yarn config set sass-binary-site https://npm.taobao.org/mirrors/node-sass

2. 克隆

   $ git clone https://github.com/it235/it235-vuepress.git

3. 删除it235-vuepress目录下的.git目录，并将it235-vuepress改名为你自己的目录

4. 构建

   # 打开CMD命令行窗口
   $ cd 你自己改名后的文档目录
   
   # 安装vuepress 安装过程稍慢，如果卡住，按空格键继续
   $ yarn add -D vuepress 或 npm install -g vuepress
   
   $ yarn docs:dev  或 npm run docs:dev

5. 服务启动成功后，会输出访问地址，如http://localhost:7777，如果你能正常访问到，那么就可以开始发布了

6. 打包成html

   $ yarn docs:build 或 npm run docs:build

   执行完成后，会在当前目录下生成dist目录，这里大家要注意了，直接访问dist目录下的html会提示静态资源找不到，不要担心。

发布到Gitee、Github

注意： gitee pages需要实名认证申请

发布到github.io

创建对外展示仓库，该仓库与内容开发的仓库不一样，大家都按照用户名.github.io的格式创建吧，我这里命名是it235.github.io

创建好后，不用clone到本地，只需要往这个项目中发布dist目录即可

接下来我们将npm run docs:build生成dist拷贝到指定目录下，使用如下命令进行发布

# 注意不要放在开发目录下，因为开发目录下已经有.git版本控制了，需要拷贝到外面

# 进入到dist目录
$ cd dist

# git初始化
$ git init
$ git add -A
$ git commit -m "first commit"
$ git branch -M main

# 注意此处的格式是：git push -f git@github.com:USERNAME/USERNAME.github.io.git main
$ git push -f git@github.com:it235/it235.github.io.git main

注意：仓库文件推送成功后，Pages中的站点自动开通，如果你的仓库名不是用户名.github.io，则需要你手动选择分支后进行Save，如下：

以上，是我们手动push操作完成，接下来我们可以把发布动作做成自动的脚本，并配合npm命令完成

在开发根目录下创建deploy.sh，用于发布dist网页到github.io，脚本内容如下

#!/usr/bin/env sh
 
# 确保脚本抛出遇到的错误
set -e
 
# 生成静态文件 , yarn docs:build
npm run docs:build
rm -rf ../blog/dist/*

# 将build生成的dist目录拷贝至上一层目录中
cp -rf dist ../blog/

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

# git初始化，每次初始化不影响推送
git init
git add -A
git commit -m 'deploy'
git branch -M main

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

修改package.json文件

"scripts": {
  // 君哥给的源码中已经添加
  "deploy": "bash deploy.sh"
}

打开gitbash，类unix命令窗口，执行npm run deploy或yarn deploy

静态资源坑（可跳过）

注意：遇到的同学可以参考，未遇到的同学直接跳过本节

发布到github.io后，你会发现，文章内容中的图片无法加载，这就比较难受了。这里的静态资源有2类：

• 第一类是属于.vuepress下的
• 第二类是属于我们文章内容中的图片

这里第二类是我们关心的，且处理难度比较大。我们针对第二类进行讲解

vuerpesss建议将静态资源存放到.vuepress\public下，但是我们在写博客时不可能将当前文章的图片拷贝到其他目录下，我们建议属于什么模块的图片存放到什么模块下。

这里有3种解决方案

• 采用图床，不建议使用gitee等一些源码或博客平台图床，有防盗链处理，推荐使用其他云对象存储或CDN

• 采用君哥推荐的做法，植入JS脚本，动态修改img.src

  找到君哥给大家准备好的custom.js文件，在loadSidebar函数下增加函数，并在vueSidebarShow函数中调用该函数

  //函数内容如下
  function gitHubIoImg() {
      var imgs = document.querySelectorAll('p img');
      let origin = location.origin;
      for (var i=0; i< imgs.length; i++) {
          let img = imgs[i];
          console.log(img.src);
          var b = img.src.substr(img.src.lastIndexOf('/assets'), img.src.length);
          let newsrc = origin + b;
          console.log(newsrc);
      }
  }

  

开发源码上传至Gitee

友情提醒：当前仓库名称非常重要，建议与您的 个人空间地址名一致，如果不一致， gitpages访问的 url就会变化成 https://xx.gitee.io/项目名称，与前面我讲的 github一样，逼格不高也不太好看，同时还需要开启base目录

1. 在码云创建仓库

2. 将从github克隆下来的代码，删除.git重命名后关联并推送到gitee仓库

   git init
   git add -A
   git commit -m "first commit"
   
   //注意，这里我使用的是ssh的方式
   git remote add origin git@gitee.com:it235/it235-vuepress-gitee.git
   git push -u origin "master"

3. 参照博客搭建环节安装vuepress依赖包，生成node_modules库
4. 使用build命令，创建dist目录，然后一起push上去，后续更新文章继续使用build命令进行打包

   

发布到gitee.io

执行deploy_gitee.sh脚本即可推送到gitee，前提是已经创建和关联过gitee的远程仓库

#!/usr/bin/env sh
 
# 确保脚本抛出遇到的错误
set -e
 
# 生成静态文件 , yarn docs:build
npm run docs:build

# git初始化，每次初始化不影响推送
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -u origin "master"

发布到云服务器

Nginx本地实验

1. 静态资源部署

   将dist目录发布到本地Nginx中（需要先下载nginx）

   • 带后缀的nginx配置

     location /dist {
         alias html/dist/;
         index index.html;
         autoindex  on;
     }

     • 开启.vuepress/config.js中的base

       module.exports = {
           //此处需要填写你部署在nginx下的文件夹名称，如果是根目录，那么可以注释掉此行，注释掉后本地打开index.html无法访问
           base: "/dist/",
           title: "君哥聊编程",
           description: '点赞、转发、收藏',
           dest: './dist',
           ...
       }

     • 把dist文件夹，放在nginx/html目录下
     • **提示：dist可以换成你想要的名称，比如blog**

   • 不带后缀的nginx配置

     • 简单做法：关闭config.js中的base设置，把dist目录下的文件，拷贝至html目录下，不要保留dist目录名称

     • 复杂做法：

       location / {
           alias html/dist/;
           index index.html;
       }

2. 反向代理到服务端口

   location / {
       proxy_pass http://127.0.0.1:7777;
   }

发布到云服务ECS

1. 服务器购买，戳我
2. 域名购买
3. icp备案
4. 公网安备
5. 域名解析
6. Nginx安装
7. 安装git，拉取博客代码
8. 运行博客
9. 使用Nginx反向代理映射

# 进入/usr/local/nginx/conf/目录
$ vim nginx.conf

# 在最后一行大括号结束之前，加入以下配置，并将it235换成你的域名
    # http 请求处理
       server {
       listen 80;
          server_name  it235.com www.it235.com;
          large_client_header_buffers 4 16k;
          client_max_body_size 30m;
          client_body_buffer_size 128k;

          # 域名默认映射到 http://127.0.0.1:7777
          location / {
               proxy_pass http://127.0.0.1:7777;
               proxy_redirect off;
          }
    }