blog 网站搭建

First Post:

Last Update:

blog 网站搭建

搭建属于自己的 hexo

目前主流的博客网站框架有 hexo hugo halo 等等 这里使用经典的解释文档多的 hexo 框架

前置准备

  1. hexo 官网

  2. nodejs 下载 LTS 版本

需要确保环境变量中有 nodejs 可以通过在 cmd 中输入 node –version 来确定环境变量是否配置成功

  1. Git 直接下载对应系统版本

  2. (可选) 设置 npm 镜像源让拉取下载资源时更快 (一般使用淘宝镜像)


hexo 搭建

1
2
3
4
#全局安装hexo cli工具
npm install -g hexo-cli
#验证安装
hexo version
  • 初始化项目

    1
    2
    3
    hexo init blog #初始化了一个blog项目文件夹 在对应文件夹打开cmd输入
    cd blog
    npm install #确保依赖下载完成
  • 内部核心文件

    config.yml #hexo 主要配置文件

    source #源文件 里面的 post 就是我们存放文章 markdown 的文件夹

    themes #存放主题

    public #markdown 等源代码生成的静态文件 markdown–> html

    scaffolds #用来存放基本的文章模版

  • 基本的 hexo 指令操作

    需要在你的项目目录下执行 可以直接在项目文件夹右键打开 git bash

    1
    2
    3
    4
    5
    6
    7
    hexo clean 清除缓存
    hexo g 生成静态文件
    hexo s 在本地服务器运行
    hexo d 部署至远程服务器
    hexo clean && hexo g && hexo s 本地三连
    hexo clean && hexo g && hexo d 远程三连
    hexo new page ***

    第一次使用 hexo 会自带一个 hello hexo 的 md 直接本地三连就可以在本地 4000 端口运行

    这时打开 4000 端口 就能看到自己博客了 不过这个是本地端口运行 别人是看不到的


hexo 部署至 github pages

只能自己在本地运行并查看终归不是我们搭建博客的目的 我们希望将网站部署到公网上 也就是能让别人也访问到

github pages 就为我们提供了这种功能 尽管由于服务器在外网访问速度会比较慢(gitee pages 已经停用 呜呜呜白嫖不了了 )


使用 vps ssh 部署 hexo(可选)

使用github提供的服务器部署的时候总是error 时连时断十分难受

这时有如下两种解决方案

github desktop (也可用source tree)

这是一个可以部署github仓库的图形化工具 可以代替cmd 并且部署时一般不会出现error的问题 对新手比较友好


ssh链接 或购买vps并使用vps代替github pages ssh链接搭建网站

说到底是你连接不上github服务器 或者太慢 仅仅使用代理是不够的

可以将默认的http链接转换成ssh链接

【大学生提高课】3 hexo与hugo博客搭建与github自动化推送和服务器推送_哔哩哔哩_bilibili

也可以使用vps(虚拟专用服务器)在vps上存放网站生成的静态文件 然后将vps和本机ssh链接

一个购置vps的网站 zgocloud https://clients.zgovps.com/index.php?root/default

zgocloud` 是一家提供 云服务器(VPS)租赁网络加速服务 的平台,主打特点是:

  • 便宜、灵活:按月付费,价格比传统大厂(比如阿里云、AWS)便宜很多。
  • 节点多、速度快:主要面向需要海外节点的用户,比如美国、日本、新加坡等地服务器,用于科学上网、建站、部署个人服务等。
  • 允许一定程度的自由搭建:很多人会用 zgocloud 的 VPS 来搭建代理工具(如 Xray、Trojan、V2Ray)、个人博客(Hexo、WordPress)、自用存储、轻量应用服务器等。

Xterminal 一个ssh链接工具 可以用这个链接购买的vps进行指令操作 这个vps也可以当做虚拟机使用

hexo搭建到vps上的教程 (以阿里云的服务器为例)

https://blog.csdn.net/qq_44706030/article/details/112759634?spm=1001.2014.3001.5506


添置自定义域名并使用赛博菩萨 cloudflare 加速解析域名(可选)

github提供的域名是多级的 会有一些不能自定义的固定部分 不容易记住(当然要是不想让认识你的人找到也不错 )

所以我们可以花最低5元买一年的域名(价格和服务商以及域名后缀有关 .xyz是最便宜的 阿里云第一年只需要5元) 域名控制台

服务器(vps或者github pages)在国外就不需要备案

有了自己的域名之后可以让cloudflare dns解析域名 开启小黄鱼 CDN加速

白嫖Cloudflare最优CDN给自己网站加速,尽情享受CF的免费服务_哔哩哔哩_bilibili

hexo 主题更换

这里提供几个比较流行和我个人喜欢的主题

  1. butterfly
  2. aurora
  3. arknights
  4. next

Arknights 明日方舟主题的壁纸

github网址

https://github.com/Yue-plus/hexo-theme-arknights

Aurora

github网址

https://github.com/auroral-ui/hexo-theme-aurora

使用教程

https://blog.csdn.net/qq_35536689/article/details/128046360?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Ebaidujs_baidulandingword%7ECtr-2-128046360-blog-119801115.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Ebaidujs_baidulandingword%7ECtr-2-128046360-blog-119801115.235%5Ev43%5Epc_blog_bottom_relevance_base9&utm_relevant_index=5

markdown 语法和图床的使用

markdown简单的语法

https://hxchimeng.xyz/post/markdown%E5%AD%A6%E4%B9%A0.html


图床的搭建

在文章中我们总会想插入图片来解释

这个时候如果是纯 markdown 文件,图片会链接存放在本地的图片文件显示(然而这种需要别人下载图片文件 如果是你的网站则需要把图片文件夹也放到 post 文件夹里)

或者通过访问某个上传到可访问的网址的图片文件 (这个可访问的专门存放图片的工具就叫图床)

使用教程自搜捏 很简单 有了图床我们就不需要把图片附上 直接访问链接就能看到md中的图片


小扩展

live2d模型接入网站

ohmylive2d 为你的个人博客添加一个Live2D看板娘_哔哩哔哩_bilibili 支持自己找的live2d模型 我自己就找了个免费的amiya的 阿米娅免费live2d]_哔哩哔哩bilibili_明日方舟

这里感谢一下大佬画的免费live2d

vps 搭建代理八合一脚本

vps可以搭建代理 有需要的可自学