首页 > 其他分享 >Hexo搭建个人静态博客网站

Hexo搭建个人静态博客网站

时间:2022-10-03 21:00:08浏览次数:72  
标签:git Hexo hexo 博客 github chniny 安装 搭建

前言

  • 前段时间博客园整改,许多博客无法查看,偶然的机会接触到了许多博客框架,可用来快速搭建一个静态博客网站;最后选择使用hexo,看了不少大佬的教程,觉得挺有意思的,于是也总结了一下自己的搭建步骤,可供大家交流
  • 写的不对的地方,欢迎指正哦

前期准备

  • 安装nodejs,打开cmd输入node -v,显示版本表示安装成功
  • 安装git,打开cmd输入git --version,显示版本表示安装成功
  • 拥有一个github账号,没有需要注册:​​https://github.com/​

搭建博客

  • 登录自己的github账号,创建一个仓库:GitHub账号名.github.io ,勾选README初始化
  • 选择一个默认的主题:Settings > GitHub Pages > Choose a theme,点击GitHub pages自动分配的网址预览
  • 安装hexo
//选择一个文件夹作为本地博客,右键 > Git Bash Here
npm i hexo-cli -g //安装Hexo
hexo -v //查看hexo版本
hexo init chniny-blog //新建并初始化一个文件
cd chniny-blog //进入文件夹
npm install //安装所需模块
npm install hexo-deployer-git --save //安装用于写markdown文档的模块

配置主题

theme: next # 主题

推送到远程仓库

  • 配置远程仓库地址
# 站点配置文件
deploy:
type: git # 项与值之间必须存在一个空格
repository: https://github.com/chniny/chniny.github.io.git
branch: main # GitHub创建的仓库默认的分支名
  • 推送
# 博客文件根目录右键 > Git Bash Here
hexo c # 清楚缓存
hexo g # 生成静态文件
hexo s # 启动本地服务,浏览器输入http://localhost:4000/可本地预览
hexo d # 推送到远程仓库
# 浏览器输入GitHub pages自动分配的网址查看主题是否设置成功

常用命令

hexo new post "文章名称"   # 生成新的md文件
hexo g # 生成静态网页
hexo s # 启动服务器,可本地预览
hexo d # 推送到远程仓库网站主页
npm i hexo-cli -g # 安装Hexo
hexo -v # 查看hexo版本
hexo init # 初始化文件夹
hexo init chniny-blog # 初始化该文件夹没有则会创建
npm install # 安装所需模块
npm i hexo-deployer-git # 安装用于写博客的扩展
npm install hexo-deployer-git --save # 安装hexo部署到git page的deployer
hexo server -p 8080 # 切换服务器端口
hexo new page "pageName" # 新建页面
hexo d -g # 生成部署
hexo s -g # 生成预览

编写博客

  • 本地博客根目录右键 > Git Bash Here
hexo new post "my blog"   # Hexo\source\_posts目录下生成md文件
# 编写博客
hexo c # 清楚缓存
hexo g # 生成静态文件
hexo s # 可本地预览
hexo d # 推送到远程仓库
  • 显示图片
# 站点配置文件打开本地资源管理
post_asset_folder: true

# Git Bash Here > 安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
hexo n "标题" # 创建新文档时会同时生成对应的文件夹,用于存放图片

# 编写markdown,插入图片
{% asset_img 图片名.jpg 描述 %}

自定义域名

  • 可在阿里云购买域名,需要实名认证;购买后解析
  • GitHub > Settings > Custom domain > 设置自己的域名(这里我是www.chniny.co)
  • 打开本地博客文件夹 > source > 创建CNAME文件,不要后缀 > 先用记事本打开写上www.chniny.co 然后去点文件后缀
  • 最后推送

备份

  • 例如我的本地博客是在GitPages目录下:D:\GitPages\chniny-blog
  • 在GitPages文件夹,右键 > Git Bash Here
git init   # 初始化为本地仓库
git add chniny-blog # 添加到暂存区
git commit -m "myblog" # 提交
git remote add origin [email protected]:用户名/仓库名.git # 关联远程仓库
git push <远程主机名> <本地分支名>:<远程分支名> # 推送

详细配置



标签:git,Hexo,hexo,博客,github,chniny,安装,搭建
From: https://blog.51cto.com/chniny/5730464

相关文章

  • 博客园背景
    ......
  • Hugo+manpassant搭建博客
    前言参考如下:​​参考1:搭建博客​​​​参考2:部署到GitHub​​​​参考3:添加文章​​​​参考4:插入图片​​​​参考5:Markdown使用​​搭建步骤以管理员的身份打开cmd#choc......
  • 07-Elasticsearch-ES集群搭建
    ElasticSearch集群搭建Elasticsearch集群准备3台虚拟机IP规划192.168.247.142192.168.247.143192.168.247.144三台虚拟机搭建ES建议采用新的机器,我用了之前......
  • Python+Django+Nginx的从0到1的个人网站搭建
    前言本文以实现最终结果为导向,对知识点不做过多阐述。流程中有任何问题请及时面向搜索程序或他人解决问题。一、准备工作Python的下载Python下载地址不会安装的......
  • 第一次博客
    第一次博客一、设计与分析(1)题目集2的7-2 题目:串口字符解析 RS232是串口常用的通信协议,在异步通信模式下,串口可以一次发送5~8位数据,收发双方之间没有数据发送时......
  • 上传本地md到博客园
    环境安装参考链接:https://www.cnblogs.com/gered/p/14736136.html1、安装python环境安装python3:https://blog.csdn.net/weixin_40844416/article/details/80889165......
  • Docker服务搭建个人音乐播放器Koel
    Koel简介Koel是一种简单的基于Web的个人音频流服务,用客户端的Vue和服务器端的Laravel编写。针对Web开发人员,Koel采用了一些更现代的Web技术来完成其工作搭建步骤doc......
  • 用Vitepress搭建静态网页文档服务器
    1.首先,我们要做的第一件事就是创建目录(在这之前请确保NodeJS已经安装好!)mkdirblog-vitepresscdblog-vitepress2.初始化package.json,并安装viteppressnpminit......
  • Win10 搭建 Ruby on Rails 环境过程
    RubyonRails环境搭建过程注:本博客并非RoR的搭建教程,仅为笔者的尝(瞎)试(搞)过程!前言笔者尝试了在Windows平台上直接下载ruby以及通过WSL搭建RoR环境,最终成功通过CM......
  • 使用 WordPress 本地搭建支持匿名评论的网站
    XAMPP下载这里部署在ContOS上,直接去SourceForge网站下载安装通过MobaXterm/Xshell等终端自带的FTP将下载的xampp-linux-*-installer.run文件发送到ContOS......