Hexo-免费个人博客搭建框架使用

article/2025/10/3 7:16:53

Hexo-免费博客搭建使用讲解

初识hexo就给人以眼前一亮的感觉, 查看资料到自己搭建个人博客, 简直是给人”带你装B,带你F”的快感,简单的博客生成操作, 多样化美观的主题选择, 功能强大的插件定制,关键是这些都是免费开源的,作为一个程序员,没有什么比遇到这种好使的软件更加给人已激动了.

casper美到爆,有木有想拥有吗?继续学习把...

配置环境

安装Node(必须)作用:用来生成静态页面的, win\mac\linux都有相关版本自行到官网下载。
安装Git(必须)作用:作为一个21时间程序员,这个肯定大家都会用, 测试过程发现最好配置ssh, 体验会更好。

开发及配置

1. 安装hexo

        $ npm install -g hexo
新版本需要安装git插件  $ npm install hexo-deployer-git --save

2. 初始化项目

新建一个你放hexo的新项目目录, cd到里面执行:

        $ hexo init$ npm install  #安装相关依赖

3. Demo生成及预览

    $ hexo generate #生成静态页面$ hexo server #启动本地预览服务

然后用浏览器访问http://localhost:4000/,此时,你应该看到了一个漂亮的博客了

4. 主题选择及下载

hexo3.0使用的默认主题是landscape, 我们可以自行下载主题到theme目录下

    $ npm install <plugin-name> --save$ git clone <repository> themes/<theme-name>

安装失败情况可参考切换国内镜像源:
nmp国内镜像

无论是插件还是主题在安装后都需要在根目录下_config.yml中修改plugins和theme的值以启用他们。

fancybox - 是否启用Fancybox图片灯箱效果
duoshuo - 多说评论 shortname
disqus - Disqus评论 shortname
google_search - 默认使用Google搜索引擎
baidu_search - 若想使用百度搜索,将其设定为true
swiftype - Swiftype 站内搜索key
tinysou - 微搜索 key
self_search - 基于jQuery的本地搜索引擎,需要安装hexo-generator-search插件使用。
google_analytics - Google Analytics 跟踪ID
baidu_analytics - 百度统计 跟踪ID
shareto - 是否使用分享按鈕
busuanzi - 是否使用不蒜子页面访问计数
menu - 自定义页面及菜单,依照已有格式填写。填写后请在source目录下建立相应名称的文件夹,并包含index.md文件,以正确显示页面。导航菜单中集成了FontAwesome图标字体,可以在这里选择新的图标,并按照相关说明使用。
widgets - 选择和排列希望使用的侧边栏小工具。
links - 友情链接,请依照格式填写。
Static files - 静态文件存储路径,方便设置CDN缓存。
Theme version - 主题版本,便于静态文件更新后刷新CDN缓存。
  • 可以在这里参考各种 美到爆的主题

5. 发布到github上

配置根目录 _config.yml

    deploy:type: git   repository: https://your_github_url.git    branch: master

相关属性设置注释:

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site  这下面的几项配置都很简单,你看我的博客就知道分别是什么意思
title: 常兴驿站 #博客名
subtitle: Goals determine what you are going to be  #副标题
description: Goals determine what you are going to be #用于搜索,没有直观表现
author: changxing   #作者
language: zh-CN #语言
timezone:   #时区,此处不填写,hexo会以你目前电脑的时区为默认值# URL   暂不配置,使用默认值
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
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: false
relative_link: false
future: true
highlight:enable: trueline_number: truetab_replace:# 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    #每页显示的文章数,0表示不分页
pagination_dir: page# Extensions    插件配置,暂时不配置
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: light    #使用的主题feed:   #之后配置rss会用,此处先不配置这个type: atompath: atom.xmllimit: 20  # Deployment    用于部署到github,之前已经配置过
## Docs: http://hexo.io/docs/deployment.htmldeploy: type: gitrepository: https://your.gitbranch: master

执行命令上传到云端github上

hexo deploy


介绍几个hexo常用的命令,#后面为注释。

$ hexo g #完整命令为hexo generate,用于生成静态文件
$ hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览
$ hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
$ hexo n #完整命令为hexo new,用于新建一篇文章

发表一篇文章

1. $ hexo new "my new post"

2. 编辑 my-new-post.md

title: my new post #可以改成中文的,如“新文章”
date: 2015-04-08 22:56:29 #发表日期,一般不改动
categories: blog #文章文类
tags: [博客,文章] #文章标签,多于一项时用这种格式,只有一项时使用tags: blog
---
#这里是正文,用markdown写,你可以选择写一段显示在首页的简介后,加上<!--more-->,在<!--more-->之前的内容会显示在首页,之后的内容会被隐藏,当游客点击Read more才能看到。

3. $ hexo g 生成静态文件

4. $ hexo d 同步到github


后续

个人博客地址
新浪微博

欢迎沟通学习


http://chatgpt.dhexx.cn/article/ExZEFKB7.shtml

相关文章

5分钟 搭建免费个人博客

五分钟倒数已经可以计时了。 三步完成免费个人博客搭建&#xff0c; 这是一篇小白也能看懂的文章&#xff0c;本文主要针对mac OS &#xff0c;Windows 除了软件安装方式和命令有些区别&#xff08;装了git bash也一样&#xff09;&#xff0c;其他基本一样。 你可能会经常看到…

适合个人博客搭建的WordPress免费开源主题汇总

WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的&#xff0c;而且价格还不便宜&#xff0c;这导致了不少的新手朋友们很为难。而有时我们仅仅根据个人的爱好来搭建一个博客&#xff0c;所以也没有必要去支付高额的费用来购买Wordpress主…

个人博客系统+源码

&#x1f345; 作者简介&#xff1a;CSDN特邀作者✌、博客专家✌、java领域优质创作者&#x1f4aa; &#x1f345;关注公众号【猿码仓库】 简历模板、学习资料、面试题库等都给你&#x1f4aa; 前言 猿码仓库 猿码仓库 20 收录于话题 #个人博客系统1个 #SSM1个 #SpringBoo…

Windows下搭建免费个人博客

三步完成免费个人博客搭建&#xff0c;本文主要针对Windows系统我的是WIN10&#xff0c;OS X请参考 5分钟 搭建免费个人博客 1.创建Github 域名和空间 1.1注册 首先需要注册一个Github账号&#xff0c;如果你已经有请跳过此步直接看1.2创建仓库&#xff0c;注意username&am…

个人博客系统

目 录 摘 要 ABSTRACT 目 录 第1章 绪论 1.1背景及意义 1.2 研究现状 2 1.3 研究意义 3 第2章 相关技术 4 2.1 系统开发平台 5 2.2 平台开发相关技术 6 第3章 系统分析 7 3.1 系统目标 8 3.2系统流程和逻辑 9 第4章系统概要设计 4.1 4.1 概述 4.2 系统…

java 搭建个人博客_5分钟 教大家搭建免费个人博客

五分钟倒数已经可以计时了。 三步完成免费个人博客搭建, 这是一篇小白也能看懂的文章,本文主要针对mac OS ,Windows 除了软件安装方式和命令有些区别(装了git bash也一样),其他基本一样。 你可能会经常看到类似于这样的博客: vno 这是打酱油的 在4分50秒以后你也能够有一个…

如何快速创建个人网站

个人网站是属于自己的一个网站,可以用来分享自己生活感悟、知识想法等,或者介绍自己的生活教育经历,常用于面试,给人眼前一亮的感觉。那么该怎样快速拥有个人网站呢?个人建站方式概况 个人建站方式主要分为云服务器开发方式以及建站平台搭建方式。对于非专业的个人,推荐使…

巧用replit搭建免费的个人云服务器

初识replit&#xff0c;被它的免费托管和域名服务所吸引。replit是个啥&#xff1f;在经过一番尝试后&#xff0c;发现这玩意儿挺有意思&#xff0c;佩服老外的想象力和创新力真强。竟还能搭建个人的云服务器&#xff0c;连域名都有了&#xff0c;这可真香。对个人开发者来说连…

【个人网站】个人网站搭建预备工作

一、购买云服务器(主机) 可以选择阿里云&#xff0c;或者腾讯云&#xff0c;不嫌麻烦或者不在乎性能的可以去寻找免费的&#xff0c;我这里是购买的腾讯云的学生套餐&#xff1a;云校园 购买完成后可以在控制台看到服务器信息 二、购买域名(前期可省) 如果网站尚未开发完成可…

你想要创建一个属于自己的网站吗?十大免费网站

目录 WordPress Docsify Dumi img Cook Ant design landing 腾讯兔小巢 百度统计 ​编辑 onenav Discuz 后台管理 github 搜一下admin&#xff0c;按star 排序 WordPress 是一个开源的建站系统&#xff0c;可创建个人博客、企业官网、电商平台&#xff0c;并且…

教你使用GitHub搭建个人网站

GitHub源码分享 微信搜索&#xff1a;码农StayUp 主页地址&#xff1a;https://gozhuyinglong.github.io 源码分享&#xff1a;https://github.com/gozhuyinglong/blog-demos 1. 创建一个代码仓库 登录你的GitHub&#xff0c;点击右上角的 号按钮&#xff0c;选择【New repos…

免费搭建个人博客

三步完成免费个人博客搭建&#xff0c; 这是一篇小白也能看懂的文章&#xff0c;本文主要针对mac OS &#xff0c;Windows 除了软件安装方式和命令有些区别&#xff08;装了git bash也一样&#xff09;&#xff0c;其他基本一样。 你可能会经常看到类似于这样的博客&#xff1a…

【已测】开源PHP个人导航网站源码,有后台

简介&#xff1a; 适合小白用的一款PHP导航源码&#xff0c;就这一个模板&#xff0c;安装哪也很简单的&#xff0c;上传解压&#xff0c;打开域名/install&#xff0c;按要求填数据库信息就好了 网盘下载地址&#xff1a; http://kekewl.org/9ZCMc6EyWNc0 图片&#xff1a;

免费域名和空间搭建个人网站——服务器篇

免费域名和空间搭建个人网站 服务器篇 网上有很多免费的服务器,但是免费的都不好用,只能凑合一下啦~~ 当然你也可以购买一些像腾讯,阿里云或者国外的虚拟主机。 我用的是国内的主机屋 点击免费空间,选择立即开通,然后登陆,注册成功后,点击立即开通,就可以了 开通之…

如何免费且快速的搭建个人网站

转载请标明出处&#xff1a;http://blog.csdn.net/u012487644/article/details/78678506 写在开头 鸿洋 - http://www.zhanghongyang.com 郭霖 - http://www.guolin.tech 严振杰 - http://www.yanzhenjie.com … goileolee - http://www.goileo.top 这篇文章主要讲如何拥有自己…

如何免费建立个人博客网站?

现在是互联网时代&#xff0c;也是及时信息时代&#xff0c;自己从自媒体时代兴起之后&#xff0c;中国互联网信息呈现了井喷式的发展。到目前为止&#xff0c;每分每秒中国的互联网都会出现各种内容&#xff0c;作为移动互联网时期的低头族的一员&#xff0c;面对各种轰炸式的…

免费且快速搭建个人www服务器的教程

想拥有自己的web服务器吗?想把服务器放到自己家里吗?通过ADSL拨号也能建立个人的服务器吗?本文告诉你答案。 要建立自己的web服务器,需要两个最重要的工作: 1 让别人知道你的主机 目前访问Internet上主机的方式主要有两种:一是通过IP地址;而是通过域名。 由于ADSL拨号…

利用新浪云SAE搭建可访问的免费个人网站

注&#xff1a;老师课件中&#xff0c;提到我们应该把网站发布到 http://www.openshift.com , 这是Red-hat 开发的PAAS服务&#xff0c;即是包装好底层的硬件和基础软件&#xff08;如 apache、nginx 、mysql 、php&#xff09;等服务&#xff0c;使用者可以直接在上面发布应用…

免费搭建个人网站流程!马上拥有自己的网站!

第一步&#xff1a;选择域名&注册域名 方式一&#xff1a;&#xff08;直接输入阿里云链接&#xff09;https://wanwang.aliyun.com/ 我用支付宝账号&#xff08;qq邮箱&#xff09;登录上面的链接。 方式二&#xff1a;百度搜索注册域名&#xff0c;就会出来多个注册域…

免费服务器搭建--个人网站搭建第一步

免费服务器搭建–个人网站搭建第一步 文章目录 免费服务器搭建--个人网站搭建第一步前言三丰云注册登录开通服务器、主机构建网站测试配置虚拟主机软件准备&#xff08;上传文件&#xff09;登录上传展示测试 前言 建议不充钱&#xff01;不暴露过多的个人信息&#xff01;不上…