从0开始搭建自己的个人博客

从0开始搭建自己的个人博客

搭建个人博客的过程中肯定会出现各种问题，不必畏惧，网上解决方案很多，大不了重来一次

先把博客搭建起来，再考虑内容和页面美观和交互效果等

这里用的是HEXO博客框架

一、部署环境

安装Node.js和npm

下载网址:Node.js官方网址

进入官网下载LTS版本并安装，此安装会把Node.js和npm一并安装

打开终端输入sudo su，输入密码后进入root用户出现：

1
sh-3.2#

在终端检查Node.js和npm是否安装成功

1
2
3
4
sh-3.2# node -v 
v12.14.0 #说明node.js已经安装成功
sh-3.2# npm -v
6.13.4 #说明npm已经安装成功

安装HEXO博客框架

借助npm包管理器来安装，由于npm默认镜像源在国内安装网速受限，所以先用npm安装cnpm，输入命令

1
sh-3.2# npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装成功，安装完成后查看版本

1
2
3
4
5
6
7
8
sh-3.2# cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.1 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@12.14.0 (/usr/local/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 19.3.0 
registry=https://r.npm.taobao.org

输入命令用cnpm安装HEXO博客框架

1
sh-3.2# cnpm install -g hexo-cli

等待安装完成，同样使用命令hexo -v验证安装成功与否

建立一个存放博客文件的空文件夹blog，并进入

1
2
sh-3.2# mkdir blog
sh-3.2# cd blog

接下来的工作都是在blog中进行各种命令操作

二、初始化个人博客

初始化HEXO

1
sh-3.2# sudo hexo init

经过一段时间等待初始化完成，输入ls -l命令可以查看到目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
sh-3.2# ls -l
total 384
drwxr-xr-x   13 root  staff     416  2 28 22:07 .deploy_git
-rw-r--r--    1 root  staff      65  2 28 17:51 .gitignore
-rw-r--r--    1 root  staff    2820  2 28 20:34 _config.yml
-rw-r--r--    1 root  staff   46349  2 28 22:07 db.json
drwxr-xr-x  268 root  staff    8576  2 28 20:24 node_modules
-rw-r--r--    1 root  staff  131757  2 28 19:54 package-lock.json
-rw-r--r--    1 root  staff     662  2 28 19:54 package.json
drwxr-xr-x   12 root  staff     384  2 28 22:07 public
drwxr-xr-x    5 root  staff     160  2 28 17:51 scaffolds
drwxr-xr-x    3 root  staff      96  2 28 17:51 source
drwxr-xr-x    4 root  staff     128  2 28 18:35 themes

启动博客

1
2
3
sh-3.2# hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

这时候他会在本地4000端口启动博客，在浏览器输入localhost:4000 可以看到博客已经成功生成在本地

三、写博客

1
2
sh-3.2# hexo new "我的第一篇博客文章"
INFO  Created: /Users/chenchen/blog/source/_posts/我的第一篇博客文章.md #可以看到INFO信息提示的文件生成目录

输入cd source/_posts进入该目录再在命令行输入ls就可以看到博客文件，然后我们输入

1
sh-3.2# vim 我的第一篇博客文章

编辑文章，markdown格式编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
title: 我的第一篇博客
date: 2020-02-28 18:01:04
tags:
---

## 第一章

内容

---

## 第二章

内容

---
## 参考文献

www.xxx.com

wq保存退出。

此时我们所在位置为_posts目录

1
2
sh-3.2# pwd
/Users/chenchen/blog/source/_posts

接下来我们要进入blog目录

*cd ../..*进入blog目录在这个目录输入一些hexo命令

1
sh-3.2# hexo g #g 顾名思义generate生成

HEXO启动

1
sh-3.2# hexo s #start

浏览器输入localhost:4000就可以看到第一篇博客的成功生成

四、把个人博客部署到远端

接下来说明如何将我们自己的博客部署到GitHub上公开访问

假设已经注册好GitHub账户

进入GitHub官网并登陆账户

点击左上角**+**号，出现一个小菜单

点击

  • New repository

在**Repository name **一栏输入新建远端博客的域名

域名格式：github账户名.github.io

填好域名后其他可以默认不填，点击Create repository

接下来需要先在命令行安装git插件

回到刚才的命令行输入

1
sh-3.2# cnpm install --save hexo-deployer-git

安装完成后在进入blog目录设置配置文件_config.yml

1
sh-3.2# vim _config.yml
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git #此处添加"git"
  repo: https://github.com/github账户名/github账户名.github.io.git #此处添加"repo:刚才创建的仓库地址"
  branch: master #此处添加"branch: master"，注意空格！！

config文件修改完成，**:wq**保存退出

使用命令部署到远端

1
sh-3.2# hexo d

接下来需要输入GitHub账号密码就可以成功的部署到远端

_posts/node_modules/ansi-styles/readme.md

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家