首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手把手教你从零开始搭建个人博客,20 分钟上手

手把手教你从零开始搭建个人博客,20 分钟上手

原创
作者头像
老表
修改2021-11-03 12:33:05
1.2K0
修改2021-11-03 12:33:05
举报

一、前言

大家好,我是爱思思爱猫爱技术的老表,最近一直在研究个人博客搭建,目前正在进行的有 Django 个人博客搭建系列,最近了解到还有很多现成的博客搭建框架,准备后面依次给大家分享下。

本文是基于 Hexo 框架来构建个人博客的,整个过程十分简单,如果顺利的话,可能只需要 10-20 分钟就可以完美构建部署好一个专属于你的个人博客了,记得点赞~

二、Hexo 基本介绍

Hexo 是一个快速、简单且功能强大的博客框架。你用 Markdown(或其他标记语言)写帖子,Hexo 会在几秒钟内生成带有漂亮主题的静态文件。

三、Hexo+Github 搭建博客网站流程

四、开始动手动脑

首先我们进入 Hexo 的官网:https://hexo.io/

就可以看到对于 Hexo 的详细介绍,直接下滑,然后点击`Get Started`,即可进入 Hexo 使用介绍文档,也可以直接访问:https://hexo.io/docs/ 进入。

4.1 基础准备

在正式开始前,确保你已经准备好了:

1、一个 GitHub 账号,可以直接去官网注册:https://github.com

2、安装好了 Git、Node.js

Git安装方法很多,最简单的是直接官网下载软件包,然后安装(Mac 和 Windows 及其他版本都有),

https://git-scm.com/downloads

复制代码

Mac 电脑害可以直接利用`brew install git` 进行安装(默认应该自带 git),或者 yum、apt-get 等包管理工具安装。

Node.js也可以直接去官网下载对应系统安装包,然后一步步安装即可。

https://nodejs.org/zh-cn/download/

复制代码

下载好后直接点击软件包,默认会给我们安装好 Node.js 和 npm(Node.js 的包管理工具)。

Windows 系统可能需要自己设置环境变量,将对应安装目录添加到系统环境变量即可,浏览器搜索下对应方法即可。

查看下 Git、Node.js 版本,确保安装无误

git --version
node -v  
npm -v

复制代码

4.2 安装 Hexo

首先我们需要新建一个项目目录,以我为例:我会在桌面的 Project 目录下新建一个 HexoBlog 文件夹用于存放改项目相关文件。

cd Desktop/Project/mkdir HexoBlog&&cd HexoBlog

复制代码

这个时候如果直接运行下面语句安装 Hexo,你可能会遇到rollbackFailedOptional

npm install -g hexo-cli

复制代码

这是因为网络问题(npm 的服务器位于国外下载慢),可以使用 cnpm(淘宝团队做的国内镜像)的获取镜像或者直接修改 npm 的资源获取地址为国内的。

# 安装cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 直接修改npm资源获取地址(推荐)
npm config set registry http://registry.npm.taobao.org

复制代码

另外我自己还遇到了文件写入权限问题,

直接修改目录文件权限即可,如:

chmod -R 777 /usr/local/lib

复制代码

解决上面问题后,我们在安装就可以成功啦~(如下截图所示)

4.3 初始化一个 Hexo Blog

前面已经准备好了所有相关环境,接下来我们就正式来初始化一个 Hexo 博客吧~初始化的命令格式为hexo init <项目名称>,这里我们暂且叫做 blog。

hexo init blog

复制代码

成功初始化后,会在当前文件夹下生成一个新的文件夹`blog`,目录结构如下:

├── _config.landscape.yml:主题配置文件,如果
├── _config.yml:站点配置文件,对站点进行配置。
├── node_modules:用来存储已安装的各类依赖包。
├── package-lock.json:包版本依赖锁文件。
├── package.json:应用数据,Hexo的版本以及相关依赖包的版本等。
├── scaffolds:博客模版文件夹,包含page.md,post.md,draft.md三种。
├── source:资源文件夹,存放静态资源如博客md文件、图片等。
└── themes:主题文件夹,Hexo通过将网站内容与主题组合来生成静态网站。

复制代码

初始化项目后,我们只需在本地执行下面命令即可在本地进行预览,

cd bloghexo s

复制代码

首先我们需要进入到新建的项目目录下,然后执行`hexo s`即可启动项目,然后我们访问http://localhost:4000/即可查看网站啦~

目前是默认的主题,另外还有一篇默认的博客`Hello World`。

4.4 Hexo 基本命令介绍

  • 本地启动项目,s 表示 server
hexo s

复制代码

  • 创建一个新的博客,n 表示 new
hexo n [layout] <title>
如:hexo new "我的第一篇博客 Hexo Hello!"

复制代码

layout 表示文章布局,可选(post page draft),默认使用 _config.yml中的 default_layout 参数代替(post)。

title 表示文章标题,如果标题包含空格的话,请使用引号括起来。

  • 生成静态文件,g 表示 generate
hexo g

复制代码

  • 部署 Hexo 网站,d 表示 deploy
hexo d

复制代码

  • 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean

复制代码

更多相关指令大家可以前往官网查看:https://hexo.io/zh-cn/docs/commands

4.5 Hexo 基本配置介绍修改

【必改部分】 站点的基本设置,首页标题、子标题、简介、关键词(英文,隔开)、作者、语言和时区,都需要修改,这样才算自己的网站嘛。

# Sitetitle: 老表的博客subtitle: '爱思思爱猫爱技术'description: '记录老表生活、Python和Go学习笔记,由Hexo+Github搭建。'keywords: 生活,养猫,Python,Go,数据分析,Web开发author: 老表language: zh-CNtimezone: 'Asia/Shanghai'

复制代码

> 踩个坑,keywords:生活之间必须要有空格,不然会报错。

重启下 Hexo 服务,我们刷新页面,就会发现上面的修改生效啦~如果没有生效,你可以先运行下`hexo clean`先清除缓存,然后再执行`hexo s`启动服务器。

【选改部分】

访问路径相关设置

# URL## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'url: http://example.comroot: /permalink: :title/permalink_defaults:pretty_urls:  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks  trailing_html: false # Set to false to remove trailing '.html' from permalinks

复制代码

原主题太简陋了,我从官网主题地址:https://hexo.io/themes/中下载了amber主题,所以我们需要将配置中的主题改为amber,大家也可以选择其他主题。

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

复制代码

4.6 将 Hexo 博客部署到 GitHub

首先我们先需要新建在 GitHub 上新建一个项目:https://github.com/new,项目名称格式需要注意,必须是用户名.github.io,如下图所示:

同时我们需要配置下 SSH 密钥,具体配置方法可以查看:mac 如何快速生成SSH key,配置github SSH公钥连接(解决git push 413问题

接着我们要修改下配置文件_config.yml,下滑到最后,将部署信息改为:

# Deployment## Docs: https://hexo.io/docs/one-command-deploymentdeploy:  type: git  repo: git@github.com:你的用户名/你的用户名.github.io.git  branch: main

复制代码

部署到 GitHub,需要安装相关工具 hexo-deployer-git。

npm install hexo-deployer-git --save

复制代码

接下来直接输入指令配置就行了,hexo clean清除缓存数据,hexo g生成相关静态文件。

hexo clean hexo g

复制代码

如果继续输入hexo d进行部署的时候,会报错,Deployer not found: git

这个时候不要慌,这是因为在本地 Hexo 项目目录还没有初始化 git 造成的,我们运行下面命令进行初始化即可。

git init

复制代码

我们再次输入hexo d进行部署即可,可能会要求输入 GitHub 账号和密码(配置了 ssh 公钥就不需要了,上面有说如何配置),直接输入即可,上传完成后,再刷新 GitHub 页面会发现多了一些文件,原来的 readme 也不见了,这是因为 Hexo 每次部署都会将`hexo g`生成的静态文件(在 blog/public 目录下)上传到 GitHub,并覆盖原先所有的内容

这个时候,我们在浏览器内访问

https://<你的用户名>.github.io/# 如:https://xksa-me.github.io/

复制代码

即可访问我们的博客首页啦,点击博客也可以进入对应的博客页面。

通过上面,我们已经得到了一个在线的、可以随时随地访问的个人博客,整个操作过程还是很简单的,麻烦的就是上传更新文章和部署项目了,每次部署都需要输入账号密码,另外由于 GitHub 服务器在国外,国内访问速度也很堪忧,不用担心,在后面的博客优化中我们一起来解决这些问题,让模型先跑起来。

4.7 设置应用自己的域名

如果你有域名的话,还可以设置专属域名,比如我之前在阿里云买的域名点击查看,当然大家也可以买腾讯云的点击查看,国内比较靠谱的两个云服务器和域名服务公司了~

(以我自己为例)首先我们需要在阿里云域名管理后台,进行域名解析,我们直接从我们自己的域名解析到博客的 github 地址,谈及一条 CNAME 记录即可,主机记录就是我们后面通过什么链接访问,记录值就是 github 访问地址了。

然后我们需要到 GitHub 对应项目中设置项目的域名,进入项目-> Settings -> Page -> Custom domain,将我们设置的 CNAME 域名写入即可(注意是在这个项目的设置里,并非 GitHub 的设置)。

最后我们还需要在本地项目中的 blog/source 文件夹下新建一个CNAME文件,编辑写入我们的域名,就是刚刚填入 GitHub 的,这样后面 GitHub 就能映射到我们的域名啦。

再执行下面命令,重新更新和部署项目,

hexo ghexo d

复制代码

部署成功后,我们直接访问https://blog.python-brief.com/(我自定义的域名)来查看我们的博客啦~

五、下集预告

经过上面操作,你会发现搭建确实很简单,但是访问真的是慢!!!

主要原因是 GitHub 服务器在国外,这个解决还比较简单,我们可以同时将项目部署到国内码云:https://gitee.com/或者 Coding:https://coding.net/,整个过程和将项目部署到 GitHub 差不多。

具体操作我们下节再分享,这周内更新,记得给本文点赞哦~还有什么好的博客搭建框架也可以留言区推荐给老表,我来踩坑!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、前言
  • 二、Hexo 基本介绍
  • 三、Hexo+Github 搭建博客网站流程
  • 四、开始动手动脑
    • 4.1 基础准备
      • 4.2 安装 Hexo
        • 4.3 初始化一个 Hexo Blog
          • 4.4 Hexo 基本命令介绍
            • 4.5 Hexo 基本配置介绍修改
              • 4.6 将 Hexo 博客部署到 GitHub
                • 4.7 设置应用自己的域名
                • 五、下集预告
                相关产品与服务
                云服务器
                云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档