个人搭建博客

kunkun小黑子
229 阅读3分钟 
title: Gitee+VuePress搭建个人博客
date: 2020-07-10
tags:
 - 搭建网站
categories: 
 - 技术类
sticky: 1

重点：不需要服务器，不需要域名，不要一分钱，白嫖使我快乐哈哈哈哈哈哈

首先说一下环境要求，既然是Gitee部署的话，Gitee的账号我们得有哈，Node环境咱也得有哈，最好是能有yarn的。这里就不过多的介绍Node和安装啦，比较简单。Git的基本操作咱也得会哈。

顺便说下Yarn的下载地址yarnpkg.com/latest.msi

安装完之后yarn --version检测一下是否安装成功，当然你直接用npm也是可以的。

说不多说，咱们直接开整。

如果是初次安装Node的同学还得配置一下淘宝镜像，毕竟外网访问实在是太慢了哈

持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org

第一步、克隆

gitee.com/vuepress-re…在gitee页面中克隆一份VuePress-themo-reco，这里就有人会疑惑了，咱们不是整VuePress吗，怎么克隆一份VuePress-themo-reco，VuePress-themo-reco是基于VuePress开发一款博客主题，我个人就是用的这个博客主题，感觉还蛮好的。怕有人不想打开网站克隆我这里直接给出git的命令啦~。

git clone https://gitee.com/vuepress-reco/vuepress-theme-reco.git

使用npm的同学

# init
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog
​
# install
cd my-blog
npm install
​
# run
npm run dev
​
# build
npm run build

使用yarn的同学

# init
yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog
​
# install
cd my-blog
yarn install
​
# run
yarn dev
​
# build
yarn build

启动之后的访问localhost:8080

image-20200710093620327

ok，第一步已经完成啦。

第二步、在Gitee中新建一个仓库

image-20200710094813408

image-20200710094922434

第三步、创建本地仓库连接远程仓库

一、Git的配置
git config --global user.name "yourname"
​
git config --global user.email "your_email@youremail.com"
​
这里建议直接配置密钥，免得推送要输入账号密码麻烦
cd ~/.ssh
如果.ssh文件夹不存在，执行指令自动创建 mkdir ~/.ssh（我已经创建了，所以不用使用这个命令）
生成RSA密钥对
ssh-keygen -t rsa -C "你的邮箱@xxx.com"
查看公钥内容
cat ~/.ssh/id_rsa.pub

将公钥内容（全部）复制并粘贴（注意：公钥内容以ssh-rsa开头）

image-20200710122836155

image-20200710122900460

image-20200710123021754

添加公钥完成后进行测试公钥（测试SSH链接）

- ssh -T git@gitee.com
- 当终端提示welcome to Gitee.com,yourname!表示链接成功

如果上面操作出现问题，最简单的办法就是clone一下你的项目到本地，然后把my-blog文件夹下的文件拷贝到你clone下来的项目里面

git status
​
git add .
​
git commit -m"提交代码"
​
git push

这样应该不会出问题了。

第四步、部署

下述的指南基于以下条件：

  • 文档放置在项目的 public 目录中；
  • VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的 npm scripts:
{
  "scripts": {
    "dev": "vuepress dev .",
    "build": "vuepress build .",
    "deploy": "./deploy.sh"
  }
}

image-20200710102910317

Gitee Pages

  1. 在 docs/.vuepress/config.js 中设置正确的 base。

    如果你打算发布到 https://<USERNAME>.gitee.io/，则可以省略这一步，因为 base 默认即是 "/"。

    如果你打算发布到 https://<USERNAME>.gitee.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

  2. 在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:

#!/usr/bin/env sh

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

# 生成静态文件
yarn build

# 进入生成的文件夹
cd public

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

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

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@githee.com:<USERNAME>/<REPO>.git master:gh-pages
cd -

image-20200710103049565

然后运行

yarn deploy

image-20200710122530985

image-20200710122552709

点击发布，然后就部署成功啦！

image-20200710122306211

avatar
文章
阅读
粉丝