nginx配置多个域名_多个GithubPages+VuePress+二级域名配置

前言

配置完小站以后嗅到了一丝不对。

咦,我怎么学习记录的东西这么多,这样放一块儿实在不好看也不适合梳理。

在语雀和Vuepress中选择了UI更简洁清爽,同时界面关键内容较为突出的Vuepress。

此文记录了如何创建第二个GithubPages(多个也类似)+Vuepress基础配置学习+绑定二级域名(可以看到这个域名是http://record.giriawsh.com也是我主站域名的二级域名)

e30abeb8f5072928f1549ab961e5cd08.png

在我的blog中点击个人学习系列,即可跳转至用vuepress搭建的学习记录站点。

5de0f4a7dc20304037506c535330d039.png

创建项目

我们只能为每个 GitHub 帐户创建一个用户或组织站点;而项目站点没有限制。

只能拥有一个的,是个人站点,也就是名为 <user>.github.io 的仓库。想要创建更多的GitHub Pages页面,可以通过创建项目站点实现。项目站点的数量没有限制。

详情可见GitHub Pages 站点的类型——官方文档

1. 创建GithubPages

  1. 新建一个仓库,名称随意。
  2. 进入仓库主页,点击右面的Settings,找到GitHub Pages部分,选择一个主题,之后可以再改,不选择的话页面可能会无法加载
  3. 建议勾选 Enforce HTTPS,否则访问时会出现安全警告。
  4. 没有出错的话,一个项目主页就建立完成了,可以通过<username>.github.io/<projectname>访问到了

2. 创建Vuepress项目

参照官方文档

  1. 创建并进入一个新目录
    mkdir vuepress-starter && cd vuepress-starter
  2. 使用你喜欢的包管理器进行初始化(听我的,用yarn,如果你不想出现奇怪的bug的话)
    yarn init # npm init
  3. 将 VuePress 安装为本地依赖
    我们已经不再推荐全局安装 VuePress
    yarn add -D vuepress # npm install -D vuepress
  4. 创建你的第一篇文档
    mkdir docs && echo '# Hello VuePress' > docs/README.md
  5. package.json 中添加一些 scripts
    这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。
    {
    "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    }
    }
  6. 在本地启动服务器
    yarn docs:dev # npm run docs:dev
    VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

Vuepress配置

首页

这块可参考官方文档主题模块。

在/docs文件夹下创建README.md文件,这是我的个人配置(把logo.jpg放在/docs/.vuepress/public 文件夹中):

---
home: true
heroImage: /logo.jpg
heroText: Giria's learning record
tagline: 个人前端学习记录
actionText: 一起梳理 →
actionLink: /source/element/
sidebar: false
features:
- title: 源码学习
  details: Element UI + Vue 源码
- title: 书籍学习
  details: 记录相关书籍的学习路径
- title: 前端相关
  details: 各代码库的学习,包括不限于NodeJS、NuxtJS、多种视图组件库等
footer: MIT Licensed | Copyright © 2020-present Giria
---
::: tip 更多
博客文章可移步[Giria's Blog](https://www.giriawsh.com)
:::

导航栏

基本配置

修改/docs/config.js文件

module.exports = {
    themeConfig: {
        sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题,显示在侧边栏上。
        lastUpdated: 'Last Updated',// 文档更新时间:每个文件git最后提交的时间
        searchMaxSuggestions: 10,
        nav: [
            {text: '主页', link: '/'},
            {
                text: '源码学习',
                items: [
                    {text: "Element UI", link: '/source/element/'},
                    {text: "Vue", link: '/source/vue/'}
                ],
            },
            {
                text: '书籍学习',
                items: [
                    {text: "JavaScript权威指南", link: '/books/theDefinitiveGuideToJavaScript/'}
                ],
            },
            {
                text: '前端相关',
                items: [
                    {text: "Node.js", link: '/fe/nodejs/'},
                    {text: "Vue.js", link: '/fe/vuejs/'},
                    {text: "SVG.js", link: '/fe/svgjs/'},
                    {text: "Nuxt框架", link: '/fe/nuxtjs/'},
                ],
            },
            {text: '博客文章', link: 'https://www.giriawsh.com'},//外链,可进行跳转
        ],
    }
}

目录组织结构如下:

a83113e3937d3e445044cc0b7d39a7e4.png

产生效果如下:

e5622022efe40f98362b8048985a822c.png

导航栏分组配置

如果想要进行导航栏分组可这样写:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      {
                text: '前端相关',
                items: [
                    {
                        text: "JS库相关", items: [
                            {text: "Node.js", link: '/fe/nodejs/'},
                            {text: "Vue.js", link: '/fe/vuejs/'},
                            {text: "SVG.js", link: '/fe/svgjs/'},
                        ]
                    },
                    {
                        text: "框架相关", items: [
                            {text: "Nuxt框架", link: '/fe/nuxtjs/'},
                        ]
                    },
                ],
            },
    ]
  }
}

效果如下:

9d118ebb3e618d2dbf2fa1d47b9f6134.png

导航栏LOGO

可以通过 themeConfig.logo 增加导航栏 Logo ,Logo 可以被放置在公共文件目录:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    logo: '/assets/img/logo.png',
  }
}

侧边栏

侧边栏这里我查了很久,很少有清楚的demo,我这里做个demo记录。

目录结构如下:

cba03a7f41e9874b7226cc3f55959fb3.png

在/docs/.vuepress/config.js中进行如下配置:

module.exports = {
    themeConfig: {
        sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题,显示在侧边栏上。
        lastUpdated: 'Last Updated',// 文档更新时间:每个文件git最后提交的时间
        sidebar: {
            '/source/element/': [
                {
                    title: 'Element源码分析',
                    collapsable: false,
                    children: [
                        '/source/element/1',
                        '/source/element/2',]//这里的顺序决定了在侧边栏中从上到下显示的顺序
                }
            ],
            '/source/vue/': [
                {
                    title: 'Vue源码分析',
                    collapsable: false,
                    children: []
                }
            ],
            '/books/theDefinitiveGuideToJavaScript/': [
                {
                    title: 'JavaScript权威指南',
                    collapsable: false,
                    children: [
                        '/books/theDefinitiveGuideToJavaScript/1',
                        '/books/theDefinitiveGuideToJavaScript/2',
                        '/books/theDefinitiveGuideToJavaScript/3',
                        '/books/theDefinitiveGuideToJavaScript/4',
                        '/books/theDefinitiveGuideToJavaScript/5',
                    ],
                }
            ],
            '/fe/nodejs/': [
                {
                    title: 'NodeJS初学',
                    collapsable: false,
                    children: [
                        '/fe/nodejs/start/1',
                        '/fe/nodejs/start/2',
                        '/fe/nodejs/start/3',
                        '/fe/nodejs/start/4',
                    ]
                },
                {
                    title: 'NodeJS深入学习',
                    collapsable: false,
                    children: [
                        '/fe/nodejs/second/test'
                    ]
                }
            ],
            '/fe/svgjs/': [
                {
                    title: 'SVG学习记录',
                    collapsable: false,
                    children: [
                        '/fe/svgjs/1',
                        '/fe/svgjs/2',
                        '/fe/svgjs/3',
                    ]
                },
            ]
        }
    },
​
};

如果想要达到如下多个分组的效果,可查看上面代码中的'/fe/nodejs/'部分,进行多个对象的配置。(上面代码为了直观省略了文件名)

11329708d68def29354c9a10e3d71d56.png

踩坑

  1. 记得给每个新创建的文件夹下增加一个README.md随便写点啥,不然有一定概率会跳转到404
  2. 文件名譬如1.md在路径中可以省略.md(.html也是可以的)

网页LOGO

将logo文件放置到/docs/.vuepress/public文件夹下,然后在config.js文件中增加:

module.exports = {
    // 注入到当前页面的 HTML <head> 中的标签
    head: [
        ['link', {rel: 'icon', href: '/pencil.png'}], // 增加一个自定义的 favicon(网页标签的图标)
    ],
}

样式修改

在/docs/.vuepress文件夹中新建styles文件夹,创建palette.styl文件。

$accentColor = #e6be00//默认主题颜色
$textColor = red//默认字体颜色
$borderColor = #eaecef//默认边框颜色
$codeBgColor = #282c34//默认背景颜色
​
示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
  opacity :1
}

更多可参考:

  • vuepress主题改造-主题的继承(1)
  • 如何创建自定义 VuePress 主题
  • Vuepress 主题改造指南 --》 追加了黑色模式,而且博客主题风格我很喜欢
  • 一款简洁而优雅的 vuepress 博客 & 文档 主题

部署

  1. docs/.vuepress/config.js 中设置正确的 base
    如果你打算发布到 https://<USERNAME>.github.io/,则可以省略这一步,因为 base 默认即是 "/"
    如果你打算发布到 https://<USERNAME>.github.io/<REPO>/(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>),则将 base 设置为 "/<REPO>/"
    module.exports = {
    title: "Girecord",
    description: 'Giria的学习记录',
    base: '/<REPO>/',//如果要绑定子域名的话这里需要改成/
    }
  2. 在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释)放置到根目录中:
#!/usr/bin/env sh
​
# 确保脚本抛出遇到的错误
set -e
​
# 生成静态文件
npm run docs:build
​
# 进入生成的文件夹
cd docs/.vuepress/dist
​
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
# 后续这里我们会发布到二级域名,像我的就需要像下面这么写:
echo 'record.giriawsh.com' > CNAME
​
git init
git add -A
git commit -m 'deploy'
​
# 如果发布到 https://<USERNAME>.github.io
# 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 -

这样我们之后每次修改后只需要点击这个脚本进行运行即可部署。

至此我们已经可以通过访问https://<USERNAME>.github.io/<REPO>访问到部署后的页面了

绑定子域名

我是在Godaddy上购买的网址,来到DNS配置,添加一条CNAME记录

c01907ba9e4905577f72d46e9fb02fc9.png
如果是参照了我之前的配置方案,这里不用写成 http:// record.giriawsh.com ,因为它会自己映射添加,写二级子域名名称record即可

参考网站

如何拥有多个GitHub Pages

vuepress 使用与主题自定义样式修改

配置GithubPage二级域名

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值