前语

作为一个技能人，假如想长时间来技能方向发展，有一个技能博客是很有必要的，它可以给咱们带来许多收益，比如：

  • 知识总结与沉淀，提高文字表达能力
  • 教是最好的学
  • 志同道合的朋友，自身影响力建造

举例

业界许多长辈也都有自己的技能博客，无论是前端仍是移动端，都在通过技能博客来输出自己关于技能的思考。

阮一峰 www.ruanyifeng.com/blog/

王巍：onevcat.com/

jake wharton：jakewharton.com/blog/

如何

咱们如何快速拥有一个技能博客呢？总的来说有以下三种方法：

第三方博客平台

  • 简书
  • 微信公众号
  • CSDN
  • segmentfault

长处：流量大，无需任何开发，注册账号即可运用

缺陷：可定制性差

自建

  • 彻底自建 运用Golang、Gin和React、esbuild开发的Blog

长处：可定制性极强

缺陷：开发量较大

博客框架

  • Hugo
  • Hexo
  • VuePress

长处：可定制性较强，主题较为丰厚

缺陷：如需定制主题，有必定开发量

接下来咱们首要介绍第三种方法。

Hugo

The world’s fastest framework for building websites

官网：gohugo.io/

github：github.com/gohugoio/hu…

安装 Hugo

brew install hugo

检查版别

hugo version

创立网站

hugo new site quickstart

添加主题

cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

装备主题

echo theme = \"ananke\" >> config.toml

写文章

hugo new posts/my-first-post.md

本地预览

hugo server -D

Build

hugo -D

如何快速搭建一个技术博客

Hexo

A fast, simple & powerful blog framework

官网：hexo.io/

github：github.com/hexojs/hexo

安装 Hexo

npm install -g hexo-cli

创立博客

hexo init blog

安装依靠

cd blog && npm install

本地运转

hexo server

如何快速搭建一个技术博客

VuePress

Vue-powered Static Site Generator

官网：vuepress.vuejs.org/

github：github.com/vuejs/vuepr…

条件

VuePress 需要 Node.js >= 8.6

创立并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

初始化

yarn init # npm init

安装依靠

yarn add -D vuepress # npm install -D vuepress

创立文章

mkdir docs && echo '# Hello VuePress' > docs/README.md

添加装备

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

本地启动

yarn docs:dev # npm run docs:dev

示例

example.vuepress-theme-blog.billyyyyy3320.com/

如何快速搭建一个技术博客

布置到github（Hugo为例）

  • 本机 git 版别 >= 2.8
  • 一个 github 账号
  • build 好的 website

创立一个新的 Github 项目，项目名称为 <username.github.io>

如何快速搭建一个技术博客

修正config.toml文件

baseURL = 'https://snowspace.github.io/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "ananke"

生成静态页面

在项目根目录下履行 hugo

Push 项目

cd public
git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/snowspace/snowspace.github.io.git
git push -u origin main

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 如遇到此过错需运用 token 方法 push 代码

如何快速搭建一个技术博客
如何快速搭建一个技术博客
如何快速搭建一个技术博客

git push https://token@github.com/snowspace/snowspace.github.io.git

如何快速搭建一个技术博客

自定义域名

获取IP，添加域名解析

ping snowspace.github.io
PING snowspace.github.io (185.199.111.153): 56 data bytes

如何快速搭建一个技术博客

创立CNAME文件，并添加域名

cd static
touch CNAME

hugo.jiudian.link

验证域名

如何快速搭建一个技术博客
如何快速搭建一个技术博客

完结

如何快速搭建一个技术博客

总结

冰冻三尺非一日之寒，技能积累也不是一朝一夕的事情，需要长时间坚持、尽力、坚持尽力。等待大家的技能博客

我的博客：jiudian.link/

github：github.com/yangpeng7