个人博客网站程序有哪些（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: "Langs 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: Langs 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: 基础博客架子

我的博客地址

：Langs blog

 

VuePress官网

官网还提供了许多实用的功能




  




  




，也有一些其他样式的主题

快快动手搭建属于你的博客吧~

关注公众号『web前端技术分享』获取更多实践分享  


  


  ，免费领取大厂面试题