2019-05-01+Web+Designer+UK

(Brent) #1

histutorialisforpeoplewhohave
heardofJAMstackandareinterested
toseewhatit cando,orperhapsruna
Wordpressblogandaresickof
updatesandpotentialhackingviamalware.
A basicknowledgeofterminalis good.You
shouldbeabletofollowalong,asthecommandsare
fairlysimple.SitesonGitHubPagesarepoweredby
Jekyllbehindthescenes,sousedalongwithGitHub
Pagesit createsa waytohostandmanageyour
websiteforfree.
Thistutorialis fora Mac.JekyllonWindowsis
possible,butnotofficiallysupported.ForWindows,
hopoverhereforhelpgettingRubysetup:
jekyllrb.com/docs/installation/windows/
Aftercompletingthistutorial,youwillhavesetup
a GitHubpagesaccount,createda Jekyllblogand
publishedbothbypushingthroughyourterminal,as
wellasusingSiteleaffora realCMSexperience.This
tutorialis focusedonconnectingthethree
technologiesasa platformtobuildyourownsite.


1 .InstallRuby
Rubyshouldbeinstalledbydefaultona Mac.Let’s
checkbytypingruby—vinyourTerminal.


2 .Createa repositoryonGitHub
If youalreadyhavea Gitaccountheadoverto
GitHubandcreateyourselfa repothatis named
withthefollowingformat:your—username.GitHub.io.
It is reallyimportantthatyougetthisnameright!


3 .Addsomecontent
Let’screateanindex.htmlfilesowecanclonedown
thefolderandgetworkingwithJekyll.Clickaddfile
inyournewrepoandtypethefollowingcode.


<!doctype html>
<html>
<head>

<meta charset='utf-8'>
<title>Home</title>

</head>
<body>
<h1>My first static Site!</h1>
</body>
</html>

4. Clone Wars!
The last step for connections will be to clone your
GitHub Pages site down. We now have the link up
ready so let’s get going with Jekyll.
Move to the folder you are going to use for your
site and type ‘git clone’ followed by the clone url
from GitHub.

5. Set up GitHub pages
You need to turn on GitHub Pages, so go into
Settings and select your master branch of the repo.
You will now be able to see this at ‘username.GitHub.
com/repo—name’.

6. Set your custom domain
(optional)
If you have a personal domain name you can link
this to your GitHub Pages site. To do this first add
your domain to the GitHub Pages account in
settings. Now go to your domain manager and
create a CNAME record (or amend it) to point at
your GitHub pages domain.

T


Tutorials


1

2 3

4a

4b

5

6

Getting to
grips with Git
Git can be quite intimidating, but once you know a
few commands it is a tool/facility you really can’t
do without. We only use the bare minimum in this
tutorial, you can learn more at GitHub.com

tutorial _________________________________________________ 67
Free download pdf