DEV Community

Spruce
Spruce

Posted on • Originally published at spruce.com.ng on

Create A Blog On Your Mobile Phone With Jekyll On Github

Welcome to the series "How to create a blog on your mobile phone with Jekyll on Github"

Yep i said it... You can create a free blog from your mobile phone, so get ready to start your journey as a blogger...

a lot of people do ask:

  1. How can i create a website with my phone?
  2. Can we blog from mobile?
  3. what is the best phone for blogging?

Yes, Yes and Yes you can create a website with your phone, you can blog from your mobile phone and you dont need a special phone for blogging.

What is moblie bloging?

Mobile blogging is a method of publishing to a website or blog from a mobile phone or other handheld device. A mobile blogs help habitual bloggers to post write-ups directly from their phones even when on the move.

Well i hope from the defination you understand what a mobile blog is and what we are trying to do here... well as you might have guessed we are trying to create a free website or blog which you can update, design and post to directly from your mobile phone.

Requirements:

  1. HTML
  2. CSS
  3. JAVASCRIPT (optional)
  4. Github account
  5. SPCK Editor

Before you beging this series with me, it is required you just have a basic knowledge of Html, Css, and javascript is optional for now, well if you dont have a basic knowledge and you are just hearing about all this for the first time, dont worry this articles Getting Started With The Web, Structuring the web with HTML should basically get you started.

Other requirements are the github account: Github is a subsidiary of Microsoft which provides hosting for software development and version control using Git.

Now dont worry about the defination, you probably will never need it anyway. All you need is to Create an Account(which is totally free), head over to Github.com and create an account.

Then Spck Editor, this is just a really cool code editor and js sandbox, this is the closest thing that is close to vscode on a mobile phone.

Head over to play store search for "Spck editor" and install it. This editor is what we'll use to write to our blog...

Note: It is required that you create a github account, and have downloaded and installed the app before you continue.

Please don't use Opera Mini, use a modern browser like Chrome or Firefox

Getting Started

Now make sure you have created your Github account by signing up

Now Click below link (Open in a different tab)

Jekyll now starter theme

Jekyll now starter theme

You should see a page that looks like this

Now its time to Fork the starter theme

click on the Forks icon

Jekyll now fork icon

Click on the forks icon

The page would reload and you would see a desktop view of the page, just look at the right side of the page at the header (top of the webpage) and click on fork

Jekyll now starter theme

Click the fork icon there

After doing that the next page you are going to see would ask you to change your Forked theme name

Now change the name of the website to: "github-username.github.io"

Jekyll now starter theme

Old one looks like this

rename Jekyll now starter theme

Change it to something like this "with your own github username"

Now its time to create a github token for the spck editor app you downloaded earlier...

click on the dropdown menu at the top of the page

Click on settings

Dropdown menu

from the dropdown:

  1. Click on settings
  2. developer settings
  3. personal access tokens
  4. Generate New Token
  5. You may be asked for password, just enter your github password and continue

    1. Give it a note: Spck editor
    2. click on the repo box (select everything under it)
    3. Scroll select write:packages and admin:org
    4. Click "Generate Token"

Set up github personal token

Select the repo box

After you have generated your token ensure you copy it to your phone clipboard because you wont see again unless you re-generate it.

copy the github personal token

Ensure you copy the token

If you have followed this guide perfectly, you are just a few steps away from your newly phone managed blog or website.

Moving on, Do you remember the "Spck editor" you downloaded earlier? Yep i guess you do

Now open it up

And you should see something that looks like this image below

Open Spck editor

Yep. Click on the first tab and you should see this

Next step is to look at the PROJECTS tab

Click on the third icon (The fork icon)

Open Spck editor fork icon

On the projects tab, click the fork icon (the third icon)

When you click on fork icon

Select credentials

Set up your Credentials as follows:

name: Github username

password/token: The token you Generated earlier (The one you copied)

email: for email (The one used in opening your github account)

Then just Click on "OK"

Now its time to clone your website to your mobile phone

Click on the Fork icon again

Just enter your Url like this

clone website on Spck editor

Enter your repo link

url: https://github.com/github-username/github-username.github.io

just change "github-username" to your own github username

then just Click on "OK"

and wait for your website to clone (Speed depends on your internet connection, mine took a few seconds)

Successfully clone website on Spck editor

After you have finished cloning you should see something like this

Yep, You guessed it, that's all. If you followed the steps correctly then i congratulate you(yeah you can feel proud). You have created a free website, and you can now manage, edit and design it on your mob ile phone.

To view your website

go to your browser

type in your website url

"github-username.github.io"

in my case "sprucestatic.github.io"

Free website created with jekyll on github

Your new site should look like this

Honestly you should be proud now. Welcome to the bloggers and website owners association of the world.

Now you can go and tell your family members, friends, share it on facebook and twitter, about your new website...

Though not really much now, Before the end of this series you will learn how to create and update a fully functional blog from your mobile phone...

Next step is Customizing your new website, and introducing you to GIT on your mobile phone... Thanks for reading.

Next part of this series

Create a blog on your mobile phone part 2

Top comments (0)