在使用自己的域名来访问 Github Page 上踩坑了 顺便一起分享一下

缘起

最近一直想弄一个自己的博客,来记录自己在前端道路上的学习

无奈技术有限,接触时间也不长,再加之有点点贪玩,就一直搁置

感觉自己的情况应该是有普遍性,也想替后来的同学淌过这些坑,所以只考虑了能 SSR 的方法

于是我有且仅有的一个技术站 Vue 不能用了

然后就考虑的NUXT + KOA2 但是自己开发费事 就想用 github pages

在看文档的时候偶然发现了 VuePress 这个项目

发现,哇塞,真好看,我好喜欢这种风格,最后又发现能自定义主题,简直完美

最后使用了meteorlxy老哥的主题 还真挺好看的

那么接来下

开撸

安装主题

创建一个新的项目 my-blog

mkdir my-blog
cd my-blog

安装 vuepressvuepress-theme-meteorlxy

npm install vuepress vuepress-theme-meteorlxy

创建 src/_posts 文件夹和 Vuepress 配置文件,项目结构大致为:

my-blog
├── src # Blog 源文件目录
│   ├── .vuepress # Vuepress 目录
│   │   └── config.js # Vuepress 配置文件
│   └── _posts # 博客文件夹
│       ├── xxx.md
│       ...
└── package.json

TIP

注意,src/index.mdsrc/README.md 不是必须的,这个主题会自动为你加上首页。

package.json 加入 script 字段:

{
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  }
}

配置主题

src/.vuepress/config.js 中配置 Vuepress 和主题:

点击展开config.js
// .vuepress/config.js

module.exports = {
  // 网站 Title
  title: "奔跑的肥皂",

  // 网站描述
  description: "This is my blog",

  // 网站语言
  locales: {
    "/": {
      lang: "zh-CN"
    }
  },

  // 使用的主题
  theme: "vuepress-theme-meteorlxy",

  // 主题配置
  themeConfig: {
    // 主题语言,参考下方 [主题语言] 章节
    lang: "zh-CN",

    // 个人信息(没有或不想设置的,删掉对应字段即可)
    personalInfo: {
      // 昵称
      nickname: "dashsoap",

      // 个人简介
      description: "练习时长快一年的前端练习生",

      // 电子邮箱
      email: "dashsoap1997@gmail.com",

      // 所在地
      location: "BeiJing City, China",

      // 组织
      organization: " BeiJing Union University",

      // 头像
      // 设置为外部链接
      avatar: "https://www.meteorlxy.cn/assets/img/avatar.jpg",
      // 或者放置在 .vuepress/public 文件夹,例如 .vuepress/public/img/avatar.jpg
      // avatar: '/img/avatar.jpg',

      // 社交平台帐号信息
      sns: {
        // Github 帐号和链接
        github: {
          account: "dashsoap",
          link: "https://github.com/dashsoap"
        },

        // // LinkedIn 帐号和链接
        // linkedin: {
        //     account: 'meteorlxy',
        //     link: 'http://www.linkedin.com/in/meteorlxy',
        // },

        // 新浪微博 帐号和链接
        weibo: {
          account: "@皂皂呢",
          link: "https://weibo.com/u/3962389632"
        },

        // 知乎 帐号和链接
        zhihu: {
          account: "奔跑的肥皂",
          link: "https://www.zhihu.com/people/zhou-jing-tian-56"
        },

        // 掘金 帐号和链接
        juejin: {
          account: "Dashsoap",
          link: "https://juejin.im/user/5c2596046fb9a049f3622ab3"
        }
      }
    },

    // 上方 header 的相关设置
    header: {
      // header 的背景,可以使用图片,或者随机变化的图案(geopattern)
      background: {
        useGeo: true
      },
      // 是否在 header 显示标题
      showTitle: true
    },
    // 是否显示文章的最近更新时间
    lastUpdated: true,
    // 顶部导航栏内容
    nav: [
      { text: "首页", link: "/", exact: true },
      { text: "日记", link: "/posts/", exact: false }
    ],

    // 评论配置,参考下方 [页面评论] 章节
    comments: {
      platform: "github",
      owner: "Dashsoap",
      repo: "dashsoap.github.io",
      clientId: "ab7d5e3f8e1d9e568757",
      clientSecret: "bc5a3ab8674fe3ae7e91f60a7ad7a4d36a21bd01"
    },

    // 分页配置
    pagination: {
      perPage: 5
    },

    // 默认页面(可选,默认全为 true)
    defaultPages: {
      home: true,

      posts: true
    }
  }
};

直到这里 我们的博客已经搭建得差不多了

开始写博客

创建你的第一篇博文:

<!-- _posts/2019-01-21-hello-world.md -->

---

category: hello
tags:

- world
  date: 2019-01-21
  title: Hello, world!
  vssue-title: Hello, world!

---

这是第一篇博文。

more 上面的内容是摘要,将显示在目录中。

<!-- more -->

more 下面的内容只有浏览这篇文章时才会完全展示,不会显示在目录中。

运行相应 script 生成你的博客网站:

# 开发
yarn dev
# 构建
yarn build

一直到这里 我们可以运行一下 yarn dev 来看看效果了

接下来我们就要把我们的代码推到 {username}.github.io 这个仓库去

git push git@github.com:{username}/{username}.github.io.git dev

解释一下 为什么推到 dev 分支,因为我们编译出来的 index.html 必须放到 master 的根目录

又不想和自己的开发文件混在一起,就只能这么操作

然后我们在根目录下 创建一个如下的 deploy.sh 文件


# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build --dest dist

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

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

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

# 如果发布到 https://<USERNAME>.github.io
# git push -f https://${token}@${address} master:master
git push -f git@github.com:{username}/{username}.github.io.git master

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

cd -


然后启动 sh deploy.sh

我们就能在{username}.github.io 这个网址下看到自己的博客啦~~