搭建属于自己的技术博客

亦凉 2022-07-15 08:40 267阅读 0赞

# 每个程序员都需要自己的博客 #

本文的博客搭建采用了静态博客技术 。

## 技术框架是：github pages和hexo ##

# hexo安装 #

## hexo介绍 ##

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

## 安装hexo之前需要先安装git和node.js ##

参考网站：https://hexo.io/zh-cn/docs/index.html

## 安装git： ##

sudo yum install git-core

## 安装node.js ##

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh  
安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable  
安装 Hexo  
所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

# github pages的配置 #

1.新建repo

2.设置名字为username.github.io

3.点击setting，选择launch automatic page generater，然后点击continue to layouts，开通pages

# 配置hexo #

## 1.初始化 ##

hexo init folder  
cd folder  
npm install

## 2.配置文件 ##

\_config文件里面包含了配置信息  
基本的配置信息介绍

## 网站 ##

参数 描述  
title 网站标题  
subtitle 网站副标题  
description 网站描述  
author 您的名字  
language 网站使用的语言  
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New\_York, Japan, 和 UTC 。

## 网址 ##

参数 描述 默认值  
url 网址  
root 网站根目录  
permalink 文章的 永久链接 格式 :year/:month/:day/:title/  
permalink\_default 永久链接中各部分的默认值  
网站存放在子目录  
如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

## 目录 ##

参数 描述 默认值  
source\_dir 资源文件夹，这个文件夹用来存放内容。 source  
public\_dir 公共文件夹，这个文件夹用于存放生成的站点文件。 public  
tag\_dir 标签文件夹 tags  
archive\_dir 归档文件夹 archives  
category\_dir 分类文件夹 categories  
code\_dir Include code 文件夹 downloads/code  
i18n\_dir 国际化（i18n）文件夹 :lang  
skip\_render 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

## 3…本地测试 ##

hexo g \# 或者hexo generate  
hexo s \# 或者hexo server，可以在http://localhost:4000/ 查看

# hexo部署到github #

## 1.安装扩展工具 ##

npm install hexo-deployer-git --save

## 2.clone项目到本地 ##

cd  
$ git clone clone地址链接

## 3.创建一个deploy脚本文件 ##

fengsehng.github.io是我的项目名字

#!/bin/bash
    # This is our first script.
    hexo generate
    cp -R public/* fengsehng.github.io
    cd fengsehng.github.io
    git add .
    git commit -m “update”
    git push origin master

4.大公告成

# hexo技巧： #

在工程目录下添加插件  
添加sitemap和feed插件

npm install hexo-generator-feed  
npm install hexo-generator-sitemap  
修改\_config.yml，增加以下内容

# Extensions
    Plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
    #sitemap
    sitemap:
      path: sitemap.xml

## 另外还有其他几个常用命令： ##

hexo new “postName” 新建文章  
hexo new page “pageName” 新建页面  
参考：  
http://jiji262.github.io/2016/04/15/2016-04-15-hexo-github-pages-blog/  
http://www.jianshu.com/p/05289a4bc8b2  
https://hexo.io/zh-cn/docs/configuration.html