Hello dear reader and welcome to the second part of this web series on how to create a website or blog right from your mobile phone.
Quick Recap
Like i said this is the second part of this series, incase you missed the first part you can always go back and read it here:
Create a blog on your mobile phone part 1.
Talking about reading the other article, You should really read that article up as this one is just building on what we learned in the orther article
We learn't a few and very essentials things though:
- concept of mobile blogging
- how to create a free website/blog
- how to clone your website/blog to your mobile phone
- and quit a all lot of other things
Don't just take my word for it, you should read it up yourself.
Requirements
Before you continue on this tutorial you should have at least a basic knowledge of the things listed below
- HTML
- How the web works (refer to part 1)
Yep thats all you will be needing for this part of the series...
Welcome to jekyll
If you are the curious type like me, you would have asked yourself, what is JEKYLL
What really is Jekyll?
Jekyll is a static site generator. it takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the sites's look and feel, URLs, the data displayed on the page and more
From the defination you get the idea... Jekyll is just plain html text that are converted to static website's.
Well static is the opposite of Dynamic , think of jekyll as the opposite of Dynamic websites built on WordPress and other dynamic websites...
of course being static is one of the features i like about jekyll, being static means your pages load super fast, no third party content(You own your contents and codes), and easy set up and customization, like you create a website with just Html, Css and js, Jeez how super fast is that...
In addition to all it's other cool features and plugins, it also uses the Shopify Liquid:
Lquid is an open-source template language created by shopify and written in Ruby.
Did i also mention that jekyll and github are completely free?
Yep they sure are.
Resources to learn jekyll
you can learn all about jekyll and liquid from the below links
Intro to git
What is git?
Git is a distributed version-control system for tracking changes in any set of files... and so on
Basically git is just meant and used to commit , pull and push changes to your remote repository
A lot of terminologies used here, dont worry about that, you will soon see them in action very soon, but before then let me introduce you to what they are and how they are connected to creating a site on your mobile phone
- COMMIT: this command is used to save your changes to your local repository (the site you cloned to your mobile phone in the part 1 of this series)
- PUSH: this command is used to push(as the name implies) all the files you have commited to your remote repository
- REMOTE REPO: This is a common repository that all team members use to exchange their changes. This repository is stored on a code hosting service like Github(That's where github comes in)
Conncecting the dots...
You may be wondering, how does this have to do with blogging from mobile phone...
well from the explanations above, you only need two things
- Remote Repository
- A place to run Git commands from
you already have a remote repo, so you shouldn't worry about that, what i will introduce to you is how you can execute git commands on your mobile phone
I guess we are done talking...
Too much talk and explanations (I really hope you get the idea), now lets stop talking and start showing how things work
Go ahead and lunch your spck editor, [The one you downloaded on the previous post]
Now its time to upload your own contents
Scroll down to the images folder and select it
Click on the three dots(menu of the image folder),and click on Upload File
Now upload a loving photo of your self, or your website logo..
Now its time to edit the config file and customize the site to display your own info
Now close your image folder and look for and open the file called
_config.yml
when you open it, you should see something like this below
basically anything you edit here affects your site drastically, so be careful of what you touch in here
First thing you should change is name, in your config file change your name
name: your name
#Change it to the name you want to use
#name: Spruce
Change the description too
description: web developer from somewhere
#Change it to anything you want, just dont make it too look (seo issues)
#description: web developer based in Edo, Nigeria
Do you remember the image you uploaded? yep you do, its time to use it. From the Getting Started With The Web you read in the first part of this series i assume you now know how the web work...
avatar: https://....
#Change it to the file you uploaded earlier
avatar: /images/spruce.jpg #in my case
Edit your footer links, add your social media liks to the footer links
footer-links:
dribble: dribble username
email:
facebook:
..... etc
Change your url to your site url
url: github-username.github.io
#where github username is changed to your username
url: sprucestatic.github.io #in my case
Note: Leave the baseurl feed empty if your site is "github-username.github.io", but if your site is "github-username/static-site-name" add "/static-site-name" to the baseurl
but if you have followed this series from the beginning please leave baseurl empty...
Now its time to use the Git commands we explained before now
in the spck editor
Click on the last fork icon at the bottom of the editor
Once you have click on the fork icon, you should see something that looks like the one below
the next steps are easy
- Click on Commit All
- Enter commit Message
You can enter anything in your commit message, but that dosen't mean you should just write a bunch of anything you think of, a commit message should briefly explain the changes you made to your project.
Remember from our defination of commit, it just save the changes to your local computer, in our case your mobile phone, that is the changes wont reflect on the web just yet, Now that is where GIT PUSH comes in the picture... Push as the name implies pushes your saved commit to your remote repo (the one hosted on github) so that people can view it on the web.
As you might have noticed, editing, uploading and committing to your cloned project dosen't require any data Connection. But when pushing your changes, you need a data connection, So go ahead and switch on your data connection and follow the below steps
To push your changes follow this steps:
- Click on the last fork icon again
- Click on push
- Click Ok
Boom and there you go, your websites should be live with your changes on the web in a minute...
Go ahead and preview your website
Well thats the end of this part of the series... Next stop is Blogging , Thanks for reading...
Top comments (0)