一、安装 VuePress

首先,在命令行中执行以下命令,全局安装 VuePress:

npm install -g vuepress

二、初始化 VuePress

执行以下命令,在本地新建一个 VuePress 项目:

mkdir my-blog && cd my-blog npm init -y npm install -D vuepress

然后,在 my-blog 目录下创建一个 docs 目录,并在其中新建 README.md 文件作为首页内容。

三、编写博客内容

在 docs 目录下,可以新建多个 Markdown 文件,用于编写博客或其他文档内容。VuePress 使用 Markdown 编写文档,可以参考 Markdown 语法进行编写。

四、配置 VuePress

在项目根目录下新建一个 .vuepress 目录,并创建一个 config.js 文件,用于配置 VuePress。

module.exports = { title: 'My Blog', // 博客标题 description: 'This is my blog', // 博客描述 themeConfig: { nav: [ { text: '首页', link: '/' }, { text: '博客', link: '/blog/' }, { text: '关于我', link: '/about/' }, ] } }

在上面的代码中,我们定义了博客的标题和描述,并配置了导航栏。然后,在 docs 目录下新建 blog 和 about 两个目录,并在其中分别创建 index.md 文件用于展示博客列表和个人简介。

五、启动 VuePress

在命令行中执行以下命令,启动 VuePress:

vuepress dev docs

然后在浏览器中访问 http://localhost:8080/,可以看到本地搭建的博客网站。

六、部署博客网站

使用 VuePress 构建博客网站时,需要将 VuePress 编译生成的静态文件部署到服务器上。推荐使用 GitHub Pages 进行部署。

首先,在 GitHub 上创建一个与博客网站同名的仓库,并将代码提交到该仓库的 master 分支。

然后,在项目根目录下执行以下命令,将博客网站编译生成的静态文件发布到 GitHub Pages 上:

npm run deploy

注意,执行该命令之前,需要在 package.json 中添加 deploy 脚本如下:

{ "scripts": { "deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist" } }

执行完成后,在 GitHub 仓库的 settings 页面中,可以看到部署成功的博客网站

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐