如何在github上搭建自己的个性blog——Windows版

2024-03-20 21:58

本文主要是介绍如何在github上搭建自己的个性blog——Windows版,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

初衷

本文适用于跟我一样的前端小白,却又想搭建一个属于自己的博客站点玩玩,可以自己DIY样式,构建属于自己的网站,但又不想花费太多精力维护。在搭建博客之前我也百度找了很多教程,网上的教程五花八门,但对于想完整的从无到有,让一个前端小白,从零开始搭建一个自己看着觉得样式还不错的博客站点,这样的文章比较少。本人写下此文仅记录自己用Github Pages 搭建博客的过程,及帮助后面的朋友们少绕点弯路。其中有些大师写的教程比较好,这里就直接引用了。

本文适用人群

有git基础 & 前端小白
本文的针对的是有git基础的人群,如果不懂git,可以参考git教程,该教程讲解得十分详细了,我就不赘述了。

流程一览

Jekyll在Github Pages上搭建一个简易blog

本文是用Jekyll在Github Pages 部署博客,首先介绍Jekyll。Jekyll是一个静态网站生成工具。它允许用户使用HTML、Markdown或Textile来建立静态页面,然后通过模板引擎Liquid(Liquid Templating Engine)来运行.
通过阮一峰老师的例子可以学会如何在git上搭建一个自己的blog.
http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
最后的效果如图所示:

这样一个简易的独立博客就完成了,但其样式太过于简陋了,为了进一步完善,我们可以借鉴别人的blog模板,但是既然是借鉴别人的模板,我们还是需要修改其中内容以适应自己的需求,这就需要本地预览调试,下面介绍Windows 上安装 Jekyll,并启动预览。

搭建Jekyll的本地预览调试环境

共分为以下几个重要步骤

1.安装 Ruby

前往 http://rubyinstaller.org/downloads/

RubyInstallers 部分,选择某个版本点击下载。
例如, Ruby 2.0.0-p451 (x64) 是适于64位 Windows 机器上的 Ruby 2.0.0 x64 安装包。

通过安装包安装

最好保持默认的路径 C:\Ruby200-x64, 因为安装包明确提出 “请不要使用带有空格的文件夹 (如: Program Files)”。
勾选 “Add Ruby executables to your PATH”,这样执行程序会被自动添加至 PATH 而避免不必要的头疼。
Windows Ruby 安装包

打开一个命令提示行并输入以下命令来检测 Ruby 是否成功安装。

ruby -v

输出示例:

ruby 2.0.0p451 (2014-02-24) [x64-mingw32]
2.安装 DevKit

DevKit 是一个在 Windows 上帮助简化安装及使用 Ruby C/C++ 扩展如 RDiscount 和 RedCloth 的工具箱。 详细的安装指南可以在程序的wiki 页面 阅读。

再次前往 http://rubyinstaller.org/downloads/

下载同系统及 Ruby 版本相对应的 DevKit 安装包。 例如,DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe 适用于64位 Windows 系统上的 Ruby 2.0.0 x64。

下面列出了如何选择正确的 DevKit 版本:

Ruby 1.8.6 to 1.9.3: DevKit tdm-32-4.5.2
Ruby 2.0.0: DevKit mingw64-32-4.7.2
Ruby 2.0.0 x64: DevKit mingw64-64-4.7.2

运行安装包并解压缩至某文件夹,如 C:\DevKit

通过初始化来创建 config.yml 文件。在命令行窗口内,输入下列命令:

cd “C:\DevKit”
ruby dk.rb init
notepad config.yml

在打开的记事本窗口中,于末尾添加新的一行 - C:\Ruby200-x64,保存文件并退出。

回到命令行窗口内,审查(非必须)并安装。

ruby dk.rb review
ruby dk.rb install
3.安装 Jekyll

1).确保 gem 已经正确安装

gem -v

输出示例:

2.0.14

2).安装 Jekyll gem

gem install jekyll
4.启动 Jekyll

按照官方的 Jekyll 快速开始手册的步骤,或是前面所述的http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html的教程, 一个新的 Jekyll 博客可以被建立并在localhost:4000浏览。

jekyll new myblog
cd myblog
jekyll serve

应用别人的模板

安装Bundler:

gem install bundler

git上clone别人的模板,或者网上下载模板,这里有个模板库可挑选自己喜欢的https://jekyllthemes.io/

安装依赖:

bundle install

运行 Jekyll:

bundle exec jekyll server

下面是本人根据上述流程搭建的一个自己的blog,应用的模板是Jacman,git上直接搜Jacman的关键词就有,效果图:

博客地址
git地址
喜欢的朋友可以fork或下载自己修改。

这篇关于如何在github上搭建自己的个性blog——Windows版的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/830857

相关文章

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程:安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Windows的CMD窗口如何查看并杀死nginx进程

《Windows的CMD窗口如何查看并杀死nginx进程》:本文主要介绍Windows的CMD窗口如何查看并杀死nginx进程问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows的CMD窗口查看并杀死nginx进程开启nginx查看nginx进程停止nginx服务

github打不开的问题分析及解决

《github打不开的问题分析及解决》:本文主要介绍github打不开的问题分析及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、找到github.com域名解析的ip地址二、找到github.global.ssl.fastly.net网址解析的ip地址三

如何搭建并配置HTTPD文件服务及访问权限控制

《如何搭建并配置HTTPD文件服务及访问权限控制》:本文主要介绍如何搭建并配置HTTPD文件服务及访问权限控制的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、安装HTTPD服务二、HTTPD服务目录结构三、配置修改四、服务启动五、基于用户访问权限控制六、

pytest+allure环境搭建+自动化实践过程

《pytest+allure环境搭建+自动化实践过程》:本文主要介绍pytest+allure环境搭建+自动化实践过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、pytest下载安装1.1、安装pytest1.2、检测是否安装成功二、allure下载安装2.

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Windows 系统下 Nginx 的配置步骤详解

《Windows系统下Nginx的配置步骤详解》Nginx是一款功能强大的软件,在互联网领域有广泛应用,简单来说,它就像一个聪明的交通指挥员,能让网站运行得更高效、更稳定,:本文主要介绍W... 目录一、为什么要用 Nginx二、Windows 系统下 Nginx 的配置步骤1. 下载 Nginx2. 解压