vuepress使用简介及个人博客搭建
在 docs 目录下,可以新建多个 Markdown 文件,用于编写博客或其他文档内容。然后,在 docs 目录下新建 blog 和 about 两个目录,并在其中分别创建。在项目根目录下新建一个 .vuepress 目录,并创建一个 config.js 文件,用于配置 VuePress。首先,在 GitHub 上创建一个与博客网站同名的仓库,并将代码提交到该仓库的 master 分支。然后,在
一、安装 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 页面中,可以看到部署成功的博客网站
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)