利用github pages五分钟建好个人网站+个人博客

news/2024/5/13 9:22:25/文章来源:https://blog.csdn.net/weixin_30458043/article/details/95228299

笔者自己在建个人网站/个人博客的时候其实遇到了不少麻烦,但是都一一解决了,这里教给大家最简单的方式。

首先你需要一个GitHub账号,访问https://github.com创建新账号即可。

然后访问https://github.com/Logos23333/Logos23333.github.io 点击Fork之后,这个项目就会保存到你自己的github上。
0

然后改名,我的github名字是logos23333, 选择Settings,将项目名字改成username.github.io,这个项目本来就叫logos23333.github.io,也就说你把前面的Logos23333改成自己的名字就行了。
1

经过上面几个步骤,其实你的github pages已经建好了,等待大概一分钟,你再在自己的浏览器上输入地址username.github.io,这就是你刚刚建好的个人网站了。

怎么样,是不是五分钟就建好了?但是如果想深入使用网站(比如你尴尬的发现你的网站显示的是我的名字),请看下面的说明。

关于github pages

我只是建个人网站而已,为什么要我注册github的账号?其实你会发现咱们建网站的过程其实你一个代码也没写,整个网站就已经出来了,谁帮咱们写的网站代码?为什么我们无需购置服务器?

github pages是什么?想要了解的更清楚可以去看github pages的官方文档:https://pages.github.com,简单的说,就是别人免费为你提供了服务器,这个服务器提供了300M的免费空间供我们使用,我们可以通过git的相关操作
来写个人博客/个人网站,而且很重要的一点是,我们可以通过 Jekyll 轻而易举的建好自己的个人网站,甚至,我们连网站代码都不用写,直接使用别人写好的Jekyll主题,就能轻松构建网站。

Jekyll的中文官网:http://jekyllcn.com/

而你刚才fork的那个项目,其实就是使用了Jekyll主题 Next (也包括我自己现在的这个网站,也是使用了Next主题)。

如何修改网站信息

我们使用github pages构建自己的个人网站的另外一个好处是:我们可以直接修改本地仓库然后通过git的一些操作,直接修改网站内容。

所以,如果你想修改网站内容,有必要学习一些git的一些基本操作。

安装 git

关于git是什么,github和git的关系,还有git的更深层次的操作,读者可以通过廖雪峰大神的github教程了解,我在这里不再赘述。
下面是廖雪峰git教程中关于git安装的内容:

在Windows上使用Git,可以从Git官网直接下载安装程序,(网速慢的同学请移步国内镜像),然后按默认选项安装即可。
安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!
安装完成后,还需要最后一步设置,在命令行输入:
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址。你也许会担心,如果有人故意冒充别人怎么办?这个不必担心,首先我们相信大家都是善良无知的群众,其次,真的有冒充的也是有办法可查的。
注意git config命令的--global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。

clone到本地

这一步是将github上的项目clone到本地电脑上:
1.打开自己的github首页
2.打开名为username.github.io的项目,复制项目地址。
2
3.clone到本地电脑
win+R输入cmd打开命令行,输入git clone https://github.com/Logos23333/Logos23333.github.io.git 这里的项目地址应该是你在第二步复制下来的,粘贴就好。
按回车执行命令之后你会发现在你当前文件目录下多出来一个username.github.io文件夹,这个文件夹里就是你的网站项目相关代码,接下来,你可以通过修改这个文件夹里的相关内容来修改你的网站内容。

修改网站相关信息

在前面已经提过,我使用的是基于Jekyll的Next主题,如果要修改主题,建议阅读下面给出的Next使用文档,修改你电脑里username.github.io文件夹里的config.yml文件。

Next的github地址:https://github.com/Simpleyyt/jekyll-theme-next
Next的使用文档:http://theme-next.simpleyyt.com

修改完后,打开命令行,输入cd username.github.io命令进入文件夹。
输入git add .
再输入git commit -m "message"
最后输入git push即完成了从本地仓库到远程github仓库的推送。

等待几分钟后再次键入username.github.io网址即可查看已经修改过的主题内容。

写博客

前面我们已经学会如何修改主题样式了,那么如何发表博客撰写博文呢?

博文格式

如果想要发表一篇博文,直接在_post文件夹下放置即可,这里对博文的格式有要求:
1.博文必须为md格式(markdown语法书写)
你现在打开_post文件夹,你会发现那里全是我已经写好的博文,而且博文全部是.md格式,博文的文件名必须是2018-2-12-name这样的格式。
2.博文开头也有格式要求
比如像这样
---
published: true
title: Web Scraping With Python Chapter 1 Learning notes
category: Python
tags:
- Web Scraping
layout: post
---
published的true或者false属性是此篇博文的可见性,title是标题,category是目录,tag是标签,读者只需知道每篇博文必须这样开头,然后在下面使用Markdown语法书写博文即可。
3.博文的编码格式必须是utf-8,否则博文不会显示。

markdown

关于markdown,其实就是一种书写语言,非常简洁而且易上手,具体的markdown语法规则请自行掌握,这里不再赘述。

进阶设定

换个主题

我觉得这个Next主题不好看,那我怎么换主题呢,Jekyll主题网站有很多供你选择的主题,但注意,其实按照一般的流程,使用Jekyll撰写博客是需要配置很多东西的(尤其是windows,挺麻烦的),所以你在
网站上下载的主题不能直接使用,你可以在某个主题的github项目主页上看谁Fork了此主题,再去Fork此人的项目,之后的流程就跟上面一样。
再细讲一下,其实Next主题已经很简洁明了了,而且还有中文官方文档说明,如果不想折腾,就直接使用这个主题就好了,如果不满意,就自己探索一下吧,在Jekyll官网主页上有很详细的教你怎么配置。

换个域名

username.github.io域名太丑了,我想自己买个域名,用这个域名作为我个人网站的网址,可以做到吗?
当然!这里教大家怎么在阿里云上买域名然后和github pages绑定。

这里我选择了阿里云域名,直接Google阿里云域名进入,注册(或者使用支付宝账号登录)登录,查询想要的域名,一般来说.com域名比较贵,.top等域名很便宜,买好域名付完款之后,选择右上角的控制台,再在左边栏选择域名,
这时候你就看到了你刚才购买的域名,再选择解析,然后添加解析,一共要添加三个,具体参照下面的图片。
3
4
5

最后,在本地项目找到CNAME文件,将其内容修改为你购买的域名,比如我购买的域名是logos23333.top,那么其内容就是logos23333.top,至此,只要等待域名解析完成,如果你在浏览器输入logos23333.top,就会自动
跳转到logos23333.github.io。(此过程可能需要等待一定时间)

想要评论区

想要评论区怎么办?这里推荐一个解决方案,使用来必力,以Next主题为例,创建好来必力账号后,进入管理页面代码管理,复制uid=""双引号中的内容,打开自己项目中的_config.yml
搜索livere,将刚才复制的内容粘贴在livere_uid:后面。
6
7
8

实时显示网站修改后的模样

经常修改网站主题,但是却要每次本地push之后才能看到修改后的样子?想要解决这个问题,你需要在本地配置Jekyll,具体请参考Jekyll官方网站。

转载于:https://www.cnblogs.com/logosG/p/9180530.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_740948.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览网站看到苦逼的表白程序,忍不住都保存下来。这就是程序员的浪费

第一个场面 <!doctype html> <html> <head> <meta charset"utf-8"> <title>#三行情书#</title> <link rel"shortcut icon" href"./logo.ico" type"image/x-icon" /> <link type"te…

模拟网站品牌列表的效果

模拟网站品牌列表的效果 说明&#xff1a;用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。 单击“显示全部品牌”按钮的同时&#xff0c;列表会将推荐的品牌的名字高这显示&#xff0c;按钮里的文字也换成“精简显示品牌” 附图&#xff1a; <----------…

iis mysql5.7_手动配置网站环境 IIS 10+PHP 7.1+MySQL 5.7

之前配置环境一直用的一键安装包&#xff0c;不管是phpStudy还是lnmp&#xff0c;昨天尝试在自己电脑配置一下iis的环境&#xff0c;也踩了一些坑&#xff0c;整理了一下。测试电脑是Windows10&#xff0c;理论上Win7和IIS7.5都支持的。安装 IIS1&#xff1a;控制面板 > 程序…

p2p网站系统开发_资阳企业系统软件开发技术公司,南京服装网站服务公司

链改(杭州)科技有限公司为您详细解读Fzxdzj资阳企业系统软件开发技术公司的相关知识与详情&#xff0c;网站造做建立&#xff0c;一方面是要展示企业的品牌、实力取卖得货&#xff0c;获得客户对企业的综合认识取信任&#xff1b;另一方面&#xff0c;就是希望通过搜索引擎&…

【温故而知新-CSS】使用CSS设计网站导航栏

1.实现背景变换的导航菜单效果预览&#xff1a; 首页公司频道最新动态客房介绍酒店服务休闲娱乐旅行社源代码&#xff1a; View Code 2.利用CSS制作横向导航 效果预览&#xff1a; 首页公司频道最新动态客房介绍酒店服务休闲娱乐旅行社 本文转自叶超Luka博客园博客&#xff0c;…

seo每日一贴_?新手如何自学SEO,教程、书籍、工具推荐

先简单了解下SEO行业SEO属于搜索引擎推广&#xff0c;什么是搜索引擎推广呢搜索引擎营销通常简称为“SEM”。但现在SEM基本是PPC的简称了&#xff0c;大家可以单独了解下SEM的知识。搜索引擎营销的基本思想是让用户发现信息(被动等用户来&#xff0c;所以用户需求更精准)&#…

利用Virtualbox+ADSL设备搭建网站

设备:TP-LINK路由器 ADSL电信4m Virtualbox虚拟机以及windows2003服务器.. 首先设置虚拟机的网卡, 然后登录路由器设置DHCP. 不知道MAC地址的可以虚拟机查看。 然后转发设置 设置80 你需要的端口 然后ip138.com 查看你的外网ip。 之后就可以访问了。 关于域名解析&#xff1a;可…

使用Nginx实现反向代理过程(一台服务器部署两个网站)

正向代理指的是客户端的 反向代理指的是服务端的 需要实现的反向代理&#xff1a; 1、首先使用SwitchHosts配置不同域名&#xff0c;如下&#xff1a;(SwitchHosts软件在上一篇博客有链接) 2、在Linux上部署两台tomcat服务器&#xff1a;(一个用于sina&#xff0c;一个用于sohu…

从其他网站抓数据

缘由 吃饭的时候和朋友聊天&#xff0c;谈到他上一个项目&#xff0c;他去抓其他网站的数据&#xff0c;然后用canvas画出走势图。吸引我的是前面的抓数据&#xff0c;以前从来没有尝试过&#xff0c;一定会很有意思了&#xff01; 开始 听他讲大致就是用jsonp去请求&#xff0…

内网https需要ssl证书_这些行业需要SSL证书来保障网站安全

无论是工作还是生活需要&#xff0c;我们每天都会访问各种网站。这些网站都是安全的吗?答案自然是否定的。为了确保网站的基本安全&#xff0c;部署SSL证书是关键的一步。那么对于成千上万的行业&#xff0c;哪些行业需要SSL证书&#xff1f;1、银行金融、电子商务企业这种行业…

IE无法打开internet网站已终止操作的解决的方法

用IE内核浏览器的朋友&#xff0c;或许不经意间会碰到这样滴问题&#xff1a;打开某个网页时&#xff0c;浏览器“嘣”跳出一个提示框“Internet Explorer无法打开Internet 站点...已终止操作”。而大多数情况下该页面甚至非常可能看起来已经载入完成&#xff0c;内容能够全然显…

ASP.NET网站管理工具的【安全】功能无法使用问题

在使用ASP.NET网站管理工具时&#xff0c;安全出现下面的问题&#xff1a; 出现这种情况的主要原因是&#xff0c;安全管理中需要创建用户和角色信息&#xff0c;所以要用到数据库&#xff0c;但是你没有设置好数据库。 可以打开vs自带的命令提示工具&#xff1a; 打开后输入as…

网站服务器上加入三层开发的网站错误解决

在网站服务器上添加三层开发的网站&#xff0c;发现网站打开的时候提示Server Error in / Application.截图如下 解决办法&#xff1a; 1,把文件夹中的bin文件夹移动到上一目录下&#xff0c;比如放入该文件的路径是root根目录&#xff0c;然后新建test目录&#xff0c;上传网站…

使用Apache服务部署静态网站

动手安装Apache服务程序。注意&#xff0c;使用yum命令进行安装时&#xff0c;跟在命令后面的Apache服务的软件包名称为httpd。如果直接执行yum install apache命令&#xff0c;则系统会报错&#xff1a;yum install httpd启用httpd服务程序并将其加入到开机启动项中&#xff0…

什么平台拥有高优质的网络推广网站?

在互联网时代&#xff0c;互联网已经渗入到了各种传统的信息传播渠道&#xff0c;尤其是移动互联网时代的到来&#xff0c;普通用户获取的信息变得纷繁多样。从而也促进了新的运营模式孕育而生&#xff0c;诸如新闻营销&#xff0c;它凭借权威、可信度高、传播速度快等独特优势…

中小企业如何选择建站公司

如何选择一家适合自己的网站建设公司&#xff1f;这是每一个准备做网站的公司都关心的话题。对于刚起步资金不雄厚的公司&#xff0c;价格低、能实现简单的功能就可以&#xff0c;那是不是意味着哪个公司做都一样&#xff0c;只看价格呢&#xff1f; 但是这样的网站真的值几百吗…

apache伪静态把css 排除掉_MVC架构网站URL访问原理及伪静态的区分

0x00 前言这是一篇简单易理解的文章.文章目录如下:0x01 什么是MVC(了解)0x02 ThinkPHP5目录理解(了解)0x03 ThinkPHP5多个配置文件关系(了解)0x04 一个URL访问请求的执行流程(重点)0x05 .htaccess文件的作用(入口文件的隐藏)0x06 前后端传参(重点)0x07 伪静态(重点)为什么这个网…

百度mip推送工具_【SEO】利用网页监控来做百度同步推送

百度主送推送&#xff08;实时&#xff09;是在百度站长工具改版升级之后推出的一款帮助站长快速向百度提交链接的工具&#xff0c;有助于让百度快速发现新链接&#xff0c;促进网站收录。它是所有提交方式里面最为快速的一种&#xff0c;建议站长将站点当天新产出链接立即通过…

10设置精美的免费网站后台管理系统模板

虽然转移。但好东西不应该是沉默 原文地址&#xff1a;http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html 免费下载点&#xff1a;http://download.csdn.net/detail/yangwei19680827/7324845 Admin Panel Template 这个后台管理模板的导航设…

刚学编程的程序员必备这5大编程网站,你知道几个?

一个好的网站&#xff0c;就是程序员学编程的基地。虽说新手程序员也许知道一些在线编程网站&#xff0c;但是质量上乘的编程网站又知道几个呢?下面就来给大家推荐5个质量上乘的编程网站&#xff1a;0、LeetcodeLeetCode是大名鼎鼎的在线刷题网站&#xff0c;通过该网站的刷题…