10分钟搭建一个免费个人博客网站

一个程序员怎么能不拥有自己的博客，本文让10分钟快速搭建部署好自己的博客

准备工作

有Gitee账号
有安装git
会 markdown 编写文档
Node.js 版本 >= 8.6

博客采用VuePress搭建，Gitee部署，接下来，5步搞定。

1.创建项目

创建项目目录，并初始化项目，安装VuePress

# 创建项目目录
mkdir myblog && cd myblog# 初始化项目，本文使用yarn，npm同理
yarn init# 安装VuePress
yarn add -D vuepress

2. 创建目录结构

myblog
├── docs
│   ├── .vuepress
│   │   ├── public        静态资源目录
│   │   │   └── logo.png
│   │   └── config.js     配置文件的入口文件
│   │
│   └── notes             笔记目录
│   │   ├── html.md
│   │   ├── css.md
│   │   └── js.md
│   ├── aboutme.md        关于我
│   └── README.md         首页
│
└── package.json

3.完成基础配置

配置主题，定义自己的导航栏

// 拷贝到myblog/docs/.vuepress/config.js
module.exports = {title: "Lang's blog",description: 'Just playing around',base: "/myblog/",themeConfig: {logo: '/logo.png',nav: [{ text: '首页', link: '/' },{text: '前端笔记',ariaLabel: 'Language Menu',items: [{ text: 'HTML', link: '/notes/html' },{ text: 'CSS', link: '/notes/css' },{ text: 'JavaScript', link: '/notes/js' }]},{text: '框架',items: [{ text: 'JS框架', items: [{ text: 'Vue', link: 'https://cn.vuejs.org/' },{ text: 'React', link: 'https://react.docschina.org/' }]},{ text: 'UI框架', items: [{ text: 'Element UI', link: 'https://element.eleme.cn/#/zh-CN' },{ text: 'Ant Design', link: 'https://ant.design/index-cn' }] }]},{ text: 'Gitee', link: 'https://gitee.com/' },{ text: '关于我', link: '/aboutme/' },]}
}

配置首页

// 拷贝到myblog/docs/.vuepress/README.md---
home: true
heroImage: /logo.png
heroText: Lang's Blog
tagline: 前端进阶之路
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2019-present Lang
---

在 myblog/package.json 中添加一些 scripts

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

4.本地启动服务

yarn docs:dev

VuePress 会在 hthttp://localhost:8080/myblog/ 启动一个热重载的开发服务器

电脑端效果

移动端效果

本文使用的VuePress的默认主题首页
如果你具备编程能力，可自定义你的专属页面

5. 部署

因为GitHub访问慢的原因，没使用GitHub Pages
我使用的是Gitee Pages ,它提供免费的静态网页托管服务

1.在本地myblog目录创建本地仓库

git init# 创建Git忽略文件.gitignore，内容如下
node_modules/

2.打包生成静态文件,

yarn docs:build

生成的静态资源会在myblog\docs.vuepress\dist 目录

3.Gitee上新建仓库myblog,上传代码

cd myblog
git add .
git commit -m "first commit"
git remote add origin https://gitee.com/langzikp/myblog.git
git push -u origin "master"

4.登录Gitee, 选择myblog仓库，服务-Gitee Pages，开通服务（需要实名审核）

5.在Gitee Page中指定部署目录为 docs/.vuepress/dist

就此，你拥有了自己的博客网站https://langzikp.gitee.io/myblog/
其中： langzikp 为你Gitee的个人空间地址，myblog为仓库名称

本文demo的源码地址：myblog: 基础博客架子

我的博客地址：Lang's blog

VuePress官网
官网还提供了许多实用的功能，也有一些其他样式的主题
快快动手搭建属于你的博客吧~

关注公众号『web前端技术分享』获取更多实践分享，免费领取大厂面试题

10分钟搭建一个免费个人博客网站相关推荐

小白也可以，10分钟搭建大气的Halo博客（保姆级教程）
一.博客的好处很多程序员.职业投资人.KOL喜欢建立自己的博客系统,为的是让自己有一个知识归纳的工具,也为自己收纳的各种资料有一个线上存储的记事本.到了币圈后,虽然有很多人用Mirro.Medium ...
30分钟利用Typecho搭建一个自己的博客网站
简介 Typecho 是国内开发者开发的一款开源免费的动态博客程序,可以运行在基于 PHP 环境的各种平台上.但是却没有详细的安装文档.很是蛋疼. 下面是我的安装步骤. 首先得有一个服务器和域名. 然 ...
pythonhelloworld项目,10分钟搭建一个小型网页(python django)(hello world！)
10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...
怎么搭建一个自己的博客？
怎么搭建一个自己的博客? 总共几个步骤买一个服务器买一个域名服务器环境配置域名跟服务IP连接然后就可以直接访问了 1.买服务器 VPS 虚拟专用服务器,就是利用虚拟化技术(如KVM.Xen. ...
零成本系列丨盏茶的功夫，零成本搭建了一个自己的博客网站
WIX,免费建站技术基础:不需要. 需要用到的材料:一个邮箱,用于注册. 如果是做一个简单的博客网站,只需要点点点就可以. 复杂网站的话,创作过程类似于使用墨刀画原型图,也是不涉及编程的. 创建步骤 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
(超详细）15分钟利用coding搭建你的hexo博客网站
一.前期准备工作 1.安装Git 点击下载点击之后即可下载,可能速度会有些慢. 所有的工具我都会打包好放到下方 2.安装Node.js 点击下载安装好在桌面右键git bash here 输入np ...
斥资75元，我搭建了自己的博客网站
1.背景 1.1.执念搭建网站是一直想做的事.读大学时,曾用阿里云搭建了一个网站,但是第二天就无法访问(没备案). 当时想到即使搭建好了,网站上也没有内容可以放,这件事也就翻篇了. 1.2.教做人 ...
Hexo+Fluid搭建自己的个人博客网站！
这篇博文我已经拖更半年了,半年前兴致勃勃地买了域名.搭起了个人博客,结果到现在网页上还是空空如也,马上就要2023年了,准备从现在开始,每天坚持做一件事,希望时间的积分效应能让我有所收益. 本博文将介 ...