TheBestXT.cc

Appearance

0%

从头搭建一个个人博客 ​

2019-7-7

写在前面 ​

这篇文章主要讲解搭建博客，以下是本文的前提或默认条件：

  1. 读者没有任何搭建博客相关经验
  2. 读者使用MacOS操作系统

对于linux与windows的读者，我会尽力给出对应的解决方案

  1. 读者有服务器部署相关经验，或者是已经有了自己的服务器

如果你没有自己的服务器，你看了文章后也会有一个只能在本地运行的博客。服务器部署相关内容很容易就可以学会。

如果读者具备自己的服务器，那我们同样默认你已经安装了php和apache环境。这个环境要求不重要，它只与8.php+github实现自动部署有关。

  1. 读者会使用命令行

这个是必要条件，如果还没有接受命令行的这种使用方式，建议先进行相关学习，再来进行尝试搭建博客。如果读者会使用命令行，那我希望你会使用iterm2 + oh-my-zsh来进行接下来的内容。

今天的文章包含：

  1. 安装node.js
  2. 安装hexo-cli
  3. 生成博客
  4. 配置hexo站点信息和主题
  5. 第一次部署到服务器
  6. php+github实现自动部署

正文 ​

安装node.js ​

node.js是一个使用JavaScript进行编程的后端语言，安装node.js的同时会附带node的包管理工具npm。我们需要使用npm来安装相关需要的程序，所以安装node.js是必经之路。

我们前往node.js的官网，下载对应系统的安装包，下载完毕后进行安装。

安装成功后打开终端，输入

➜  ~ npm -v
6.9.0

我们可以看到当前的npm版本号，这说明已经安装成功了。

安装hexo-cli ​

hexo是一个博客系统，这里是它的官网。它借助npm的功能来构建一个静态的博客系统，用户只需要掌握npm相关的原理，即可搭建一个个人博客。hexo-cli是hexo的命令行工具，有了它就可以在命令行操作博客。

首先我们使用npm来安装hexo-cli。

➜  ~ npm install hexo-cli

提示成功后，我们使用

➜  ~ hexo -v
hexo-cli: 2.0.0
os: Darwin 18.6.0 darwin x64
node: 12.5.0
v8: 7.5.288.22-node.14
uv: 1.29.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.38.0
napi: 4
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1c
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1

来查看当前的hexo版本。这代表我们已经安装成功了。

生成博客 ​

我们前往想要搭建博客的磁盘，创建一个博客。

➜  ~ cd /Volumes/Code
➜  Code hexo init hexoblog1

hexo会从github仓库中下载最新的博客模板，并尝试使用npm来构建它。成功后命令行会提示


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.9.0 → 6.10.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.10.0   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

INFO  Start blogging with Hexo!

前往初始化成功的博客目录，会看到已经生成好了一部分文件

➜  Code cd hexoblog1
➜  hexoblog1 ls
_config.yml       package-lock.json scaffolds         themes
node_modules      package.json      source

我们输入命令

➜  hexoblog1 hexo s -p 1234
INFO  Start processing
INFO  Hexo is running at http://localhost:1234 . Press Ctrl+C to stop.

这里的 -p 1234是指定了端口号，因为写文章的时候默认端口4000被占用了。

来运行博客。点击命令行中的地址，访问生成好的默认博客。

这代表我们已经成功构建了博客。

配置hexo站点信息和主题 ​

hexo配置信息存放在/_config.yml文件中，具体的配置项可以参考hexo官方的配置文档。根据自己的需要，我的配置文件写成

yml
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: xtzero
subtitle: xt
description: 从前从前，有个人爱你很久
keywords: xt zero
author: xt
language: zh_cn
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: /
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Chic

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

其中有一行

theme: Chic

是指定了主题为Chic。hexo官方的主题站是:https://hexo.io/themes/，你可以在这里找到想要的主题。以安装Chic主题为例，我们从hexo主题站跳转前往该主题的github首页，下载主题的文件，放在/themes文件夹下，在配置文件中修改theme参数为Chic。打开主题文件夹下的配置文件/themes/Chic/_confid.yml，根据需要，修改为

# html lang
language: zh

# Header
navname: XTZERO

# navigatior items
nav:
  首页: /
  文章: /archives
  分类: /category
  标签: /tag
  作品站: /children
  README: /about

# favicon
favicon: https://tvax4.sinaimg.cn/crop.0.0.1080.1080.180/e9021108ly8g2qxtpraroj20u00u0ade.jpg

# Profile
nickname: xt

### this variable is MarkDown form.
description: 从前从前，有个人爱你很久.
avatar: https://tvax4.sinaimg.cn/crop.0.0.1080.1080.180/e9021108ly8g2qxtpraroj20u00u0ade.jpg

# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
links:
  #  Blog: /
  #  Category:
  #  Tags:
  Link: http://xtzero.me
  #  Resume:
  #  Publish:
  #  Trophy:
  #  Gallary:
  #  RSS:
  #  AliPay:
  #  ZhiHu:
  #  LinkedIn:
  #  FaceBook:
  #  Twitter:
  #  Skype:
  #  CodeSandBox:
  #  CodePen:
  #  Sketch:
  #  Gitlab:
  #  Dribble:
  #  Instagram:
  #  Reddit:
  #  YouTube:
  #  QQ:
  Weibo: https://weibo.com/xtzero2
  #  WeChat:
  Github: https://github.com/xtzero

# how links show: you have 2 choice--text or icon.
links_text_enable: false
links_icon_enable: true

# Post page
## Post_meta
post_meta_enable: true

post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: false

post_copyright_author_enable: false
post_copyright_permalink_enable: false
post_copyright_license_enable: false
post_copyright_license_text: Copyright (c) 2019 <a href=" ">CC-BY-NC-4.0</a > LICENSE
post_copyright_solgan_enable: false
post_copyright_solgan_text: 从前从前，有个人爱你很久
## toc
post_toc_enable: true

# Page
page_title_enable: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: Y-M-D
time_format: H:i

# stylesheets loaded in the <head>
stylesheets:
  - /css/style.css

# scripts loaded in the end of the body
scripts:
  - /js/script.js


# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
  enable: true
  import: demand # global or demand
  ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
  ## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter

这时候运行一次

hexo clean && hexo g && hexo s

即可看到效果

第一次部署到服务器 ​

直接使用github，将全部的文件都传到github上。前往服务器，执行git clone和git pull即可。

hexo搭建的博客系统有些问题，如果不带node_modules文件夹，在服务器上没办法重新执行npm install。所以就只能全部上传。

php+github实现自动部署 ​

实现方法请参考：

使用php配合github webhook进行自动部署

需要安装php运行环境，php版本要求 > 5.6。

在网站根目录部署ci.php，让该文件能被ip访问到。

前往repo首页，依次选择Settings-Webhooks-Add webhook。在Payload URL中填入上述可执行的php的地址，比如http://127.0.0.1/ci.php。

添加成功后尝试对repo进行一次push操作，前往服务器查看是否已经自动拉取成功了。

php接收到push事件后会自动前往web_root/repo_name并执行git pull，相关代码在脚本的第28行。可以根据需要来修改。

© thebestxt.cc
辽ICP备16009524号-8
本站所有文章版权所有，转载请注明出处

Copyright © 2019-present xt