LiuChengBlog > 网站搭建

网站搭建

2020-01-14

学习杂谈, 网站搭建

1、前期准备

Windows10+Github+hexo搭建
提前说下，我这个网站使用的主题来自Github上ZEROKISEKI对“忧郁的弟弟”网站的移植。
因为个人兴趣很喜欢这个主题，十分感谢ZEROKISEKI的移植。
下面附上源主题链接，大家可以去支持下。
然后正式开始搭建个人博客网站。

2、git的下载与安装

1）git和GitHub的关系以及为什么要用git
   git的专业名称叫做：分布式版本控制系统。
   Github简单来说就是个存放代码的仓库。
   我们网站搭建完成后，肯定要进行一些改动，或是修改网页设计，或是添加删除文章等。git的作用相当于对每次进行修改的文件打上版本号，保证我们每次从仓库中读取的文件是最新的版本。
2）git的下载
   官网的链接、百度云链接 提取码: d63x
3）git的安装与配置
   安装没有什么好说的，一直狂点next，最后点击install就好。
   安装好之后在桌面点击右键 Git Bash Here
     ZT-01-01.png
   在打开的窗口中输入如下指令：ssh-keygen -t rsa
     ZT-01-02.png

3、Node.js的下载与安装

1）Node.js的下载和安装
   官网的链接、百度云链接 提取码: wsti
   安装也是一直狂点next就好
2）更换国内镜像
   以管理员身份运行命令提示符
   输入如下命令： 

1
2
3
npm config set registry https://registry.npm.taobao.org  
npm config get registry  //返回https://registry.npm.taobao.org，说明镜像配置成功。  
npm install -g cnpm --registry=https://registry.npm.taobao.org

4、安装Hexo搭建Hexo博客

1）安装Hexo
   打开 git bash，输入如下命令：
   $ cnpm install -g hexo-cli
2）搭建Hexo博客
   在电脑上新建一个专门用来存放你的博客的文件夹，如 D:\Test
在该文件夹下 右键-git bash here，然后输入：
     hexo init
     hexo server
   完成之后，浏览器访问 http://localhost:4000 ，即可看到hexo博客页面
     ZT-01-03.png

5、Github上创建网站代码仓库

1）创建仓库
   在GitHub上创建以你的GitHub用户名（注意不是昵称）命名的项目，例如我的GitHub用户名为 LiuChengBlog 那么我就创建一个名字为：LiuChengBlog.github.io 的项目。
     ZT-01-04.png
2）创建SSH连接
   打开Github的设置界面，依次点击SSH and GPG keys和New SSH Key
     ZT-01-05.png
   然后用记事本打开如图路径下的 id_rsa.pub 文件
     ZT-01-06.png
   将记事本中的全部内容复制到刚刚打开的SSH Keys的界面中，再点Add SSH key
     ZT-01-07.png
3）复制仓库地址
   创建好仓库后点开仓库，复制如图中的仓库地址
     ZT-01-08.png

6、配置Hexo

   打开刚才新建的Test文件夹，用记事本打开_config.yml配置文件，找到deploy，进行如下配置，完成保存。注意格式不能错。

1
2
3
4
deploy:
  type: git  
  repository: https://github.com/qiuyeyijian/  qiuyeyijian.github.io.git   //将地址换成自己的  
  branch: master

   然后在Test文件夹下打开Git Bash，输入如下命令：

1
2
3
npm install hexo-deployer-git –save
hexo g  //（本地生成静态文件）
hexo d  //（将本地静态文件推送至Github）

   在Test文件夹下的Git Bash中，输入如下命令下载主题，这里以我这个用的主题为例 

1
$ git clone https://github.com/ZEROKISEKI/hexo-theme-gal themes/gal

   然后找到博客根目录下的config.yml配置文件中的theme属性，将其设置为gal
   在根目录下的config.yml配置文件中添加如下的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jsonContent:
  dateFormat: MM-DD
  pages:
    title: true
    text: true
    path: true
    date: true
    excerpt: true
    preview: true
  posts:
    title: true
    text: true
    path: true
    date: true
    excerpt: true
    tags: [{
      name: tag.name,
      slug: tag.slug,
      permalink: tag.permalink
    }]
    preview: true

   在Test文件夹下的Git Bash中，输入如下命令

1
2
3
4
5
6
npm install hexo-renderer-sass --save 
npm install hexo-generator-json-content --save
hexo new page "search"              // 搜索功能的必须步骤
hexo new page "404"                // 开启404页面
hexo new page "tags"              // 开启标签功能
hexo new page "categories"       // 开启分类功能

   最后再次输入如下命令

1
2
hexo g  //（本地生成静态文件）
hexo d  //（将本地静态文件推送至Github）

7、结束

至此，基础的设置都已经结束，现在打开你的网址应该就可以看到网页了
例如我自己创建的，就输入： liuchengblog.github.io