返回

0基础教你用VuePress+Github Pages搭建个人博客

前端

最近想自己搭建一个个人博客，但是由于技术能力有限，一直没有找到合适的解决方案。直到我发现了VuePress和Github Pages，这两个工具简直就是为我量身定做的。VuePress是一个基于Vue.js的静态网站生成器，它可以轻松地将Markdown文件转换为静态HTML页面。Github Pages是一种免费的静态网站托管服务，它可以让你轻松地将你的网站发布到互联网上。

环境准备

  • Node.js
  • Git
  • GitHub 账户

搭建步骤

  1. 安装VuePress
npm install -g vuepress
  1. 创建新项目
vuepress init my-blog
  1. 安装主题
cd my-blog
npm install vuepress-theme-blog
  1. 修改主题配置
// .vuepress/config.js
module.exports = {
  theme: 'blog',
  base: '/my-blog/',
  title: '我的博客',
  description: '我的个人博客，分享我的技术心得和生活感悟。',
}
  1. 运行开发服务器
npm run dev
  1. 提交代码到Github
git init
git add .
git commit -m 'initial commit'
git remote add origin https://github.com/your-username/my-blog.git
git push -u origin master
  1. 在Github上启用Pages服务

1）进入你的Github项目，点击“Settings”选项卡。
2）在“GitHub Pages”部分，选择“master”分支作为源分支，并选择“/”作为根目录。
3）点击“Save”按钮。

  1. 访问你的博客

你的博客现在已经可以在线访问了，网址是https://your-username.github.io/my-blog/。

结语

搭建一个个人博客并不难，只要你掌握了正确的工具和方法。VuePress和Github Pages都是非常棒的工具，它们可以帮助你轻松地搭建一个免费的个人博客。如果你也想搭建自己的博客，不妨试试这两个工具吧！