wangqiangorz/vueblog

Vue2.0全家桶, GitHub Pages 搭建个人博客站点🍖🌭🍔

🏃vueBlog🏃

方便自己，也方便他人，好好学习，天天向上。

目录

• 安装git
• 安装node
• 安装淘宝镜像cnpm
• 本地运行
• 打包上传运行

Demo

Moonlight的个人博客

使用方法

下载项目到本地

git clone https://github.com/Moonlightg/vueBlog.git

本地运行

1.安装依赖

npm install

安装了cnpm就用

cnpm install

2.在本地开启服务，然后就可以通过 http://localhost:8084 访问了

npm run dev

3.创建 OAuth Application

3.1

3.2

3.3

3.4

3.5

3.6

4.个人配置 - 修改「vue/src/store/account.js」文件中的「state」属性

const state = {
  accessToken: localStorage.getItem(LS_KEY_ACCESS_TOKEN),  // 这个不要修改，这个不要修改，这个不要修改。当前登录用户的 GitHub AccessToken
  auth: {
    proxy: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token', // 这个不要修改，这个不要修改，这个不要修改。
    clientID: '5b4cde4044d29cc1678d',   // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client ID
    clientSecret: 'd506c402b90890d4cc584b1730623b0a8726ddd9'  // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client Secret
  },
  gitHubUser: null,  // 这个不要修改，这个不要修改，这个不要修改。
  gitHubUsername: 'Moonlightg',  // 修改成你自己的 GitHub 账号
  copyright: '2017 - 2017',  // 修改成你自己的
  recordNumber: 'null',  // 修改成你自己的备案编号，如果没有备案的话就设置为 null
  repo: 'Moonlightg/mb',  // 记录 Issue 的仓库的全名「用户名/仓库名」
  pageSize: 10,  // 博客列表每页显示多少条博客
  showQQGroup: true,  // 如果要显示你自己的 QQ 群二维码图片的话这里配置成 true 并且替换「BGAIssueBlog-Web/static/img/qq-group.png」为你自己的 QQ 群二维码图片，否则配置成 false 即可
  thirdPartySite: [  // 配置你想在左上角展示的第三方站点信息
    {
      img: 'static/img/github.png',  // 第三方站点图标，存放在「BGAIssueBlog-Web/static/img」目录中
      url: 'https://github.com/Moonlightg'  // 第三方站点的 url
    },
    {
      img: 'static/img/weibo.png',
      url: 'http://weibo.com/MoonlightGjb'
    }
    // 如果还有其他站点需要显示，继续在这里追加
  ]
}

5.个人配置 - 修改网站图标

修改「vueeBlog/static/img/favicon.ico」文件

6.个人配置 - 修改网站标题

修改「vue/index.html」文件里「<title>」标签里的内容

发布到 GitHub Pages

1.打包

npm run build

2.发布

拷贝「vueBlog/docs」目录里的所有文件到「GitHub Pages」的根目录下
并将「GitHub Pages」仓库 PUSH 到 GitHub 上

打包发布小白详细步骤

1.在GitHub 上创建一个仓库 [myblog]

2.把myblog 检出到本地

3.把打包好的「vueBlog/docs」目录里的所有文件拷贝到「myblog」的根目录下

4.git bash 按顺序执行以下命令

安装git后配置
git config --global user.name "你的github用户名"

git config --global user.email "你的github绑定的邮箱"

4.1.git status

4.2.git add .

4.3.git status

4.4.git commit -m "modify"

4.5.git pull

4.6.git push