Create A Blog On Your Mobile Phone Part 2

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:

1. concept of mobile blogging
2. how to create a free website/blog
3. how to clone your website/blog to your mobile phone
4. 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

1. HTML
2. 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

1. jekyll official documentation
2. liquid official documentation

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

1. 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)
2. PUSH: this command is used to push(as the name implies) all the files you have commited to your remote repository
3. 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

1. Remote Repository
2. 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]

Your cloned project should look like this

Now its time to upload your own contents

Scroll down to the images folder and select it

Image folder looks like this

Click on the three dots(menu of the image folder),and click on Upload File

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

Your config file looks like this

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

Click on the last fork icon to your right

Once you have click on the fork icon, you should see something that looks like the one below

Click on the commit all

the next steps are easy

1. Click on Commit All
2. 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:

1. Click on the last fork icon again
2. Click on push
3. Click Ok

Wait for it to push your changes

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

On mobile phone your site looks like this

On a pc your site looks like this

Well thats the end of this part of the series... Next stop is Blogging , Thanks for reading...

Previous parts of this series

Create a blog on your mobile phone part 1