VuePress博客搭建（1）—— 项目初始化及部署

钟孙点点
465 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

前言

我从21年国庆期间就一直有想法，想搭建个基于VuePress和GitHub的免费博客网页，因为总总原因一直没有实施。现在由于疫情居家办公，终于可以实现从零开始搭建个人博客网站了。

一、 创建项目

按照官方文档搭建项目文档

  • 创建并进入一个新目录
mkdir jodieBlob && cd jodieBlob
  • 初始化项目
npm init
  • 将VuePress安装为本地依赖
npm install -D vuepress
  • 在package.json中配置 scripts
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
}
  • 参考官方文档中的目录结构,在文件夹内创建目录

因为我今天只配置主题页，所以就只创建了与主题页相关的几个页面

. 
├── docs 
│   ├── .vuepress  
│   │   ├── public 
│   │   └── config.js  
│   │  
│   └── README.md 
│  
└── package.json
  • 在本地启动服务器
npm run docs:dev

二、开始写首页

具体的参数含义、请自己前往官方文档中查看。

  • docs/README.md的文件内容
---
home: true
heroImage: /jodie.jpg
heroText: Jodie
tagline: 前端程序媛
footer: MIT Licensed | Copyright © 2022-present Jodie Zhong
---
  • 默认主题配置
// .vuepress/config.js
module.exports = {
    title: 'Jodie',
    description: 'Just playing around',
    head: [
        [ 'link', { rel: 'icon', href: '/jodie.jpg'}]
    ],
    themeConfig: {
        logo: '/jodie.jpg',
        repo: "jodie-zhong/jodie-zhong.github.io",
        darkMode: false
    }
}

文件的编写内容完成，接下来就是将代码上传到GitHub上并部署了。
配置后的效果

image.png

二、 创建GitHub仓库

  • 创建与git账号一致的一个仓库

创建仓库名的原则是：账号名称.github.io。这样是为了以后能够更方便的访问到自己的博客网站。
因为我的GitHub名是jodie-zhong，所以我就创建个仓库叫jodie-zhong.github.io。

  • 创建分支

当前仓库我创建了两个分支。
main： 用于最后预览的
v1.x： 存放vueress原始代码

  • 配置访问地址

创建好仓库后，我们点击设置来配置博客的访问地址，如下图所示。配置成功后便可以访问了。
注意事项：第三步 应该选默认的 /root image.png

  • 上传代码 我们将上面写的代码传入v1.x分支后，编译当前项目,并将编译好的文件上传到main分支后，便可以正常访问了。
npm run build
avatar
文章
阅读
粉丝