1. Head over to mobirise.com, and depending on what device you have whether it's a PC or a Mac like me. Download the correct app for your computer.
2. After you click download, you will be redirected to this signup page, go ahead and n for an account, using email.
3. If you signed up with email, go to your email, and you should have received an email from mobirise with your login details. Type your password where it says "Enter password" on the mobirise website.
4. Depending on what device you have, download the correct app. Afterwards, install the app to your PC or Mac.
5. Login with your account once prompted to login.
6. After you login you will be greeted with a default website, this is the default website that everyone gets when they download mobirise for the first time. it includes tutorials on how to do things such as edit text, replace images, adding blocks, and more. So I suggest you to read it and explore the app, afterwards we can start building our website!
1. Click on the 3 lines in the top right hand corner of the app, then click sites.
2. You can choose only between Mobirise 5 or Mobirise AMP as these themes are free or if you are willing to pay check out the other themes.
3. Now click on add blank page.
4. You will be prompted to create your site based on the Mobirise 5 theme, or Mobirise AMP theme, click OK.
5. Click + to see all the blocks you can add.
6. Now let's add a navbar first, afterwards we can add a header. So what you want to do is click on the navbar you want. (Located under Menu category)
7. Drag or click the navbar you want to add it onto the blank page.
8. Now let's edit the titles, firstly Mobirise which is the company name. To edit the title / text simply click on it to edit it.
9. Now type your company name, and for the others do your pages (ie: Home page, discover, about, contact, etc.)
10. Now that we have edited it, we can move on to the page header. Click + to add blocks.
11. Find the header you want and drag or click on it to add to the page.
12. Now that we added a header, let's change up the text. Firstly the title. Click on the text to edit it. When you click on the text, you will see some options to choose from, firstly the colour of the text, 2nd the aligning, 3rd the size (when you click on text). (I somehow completely forgot to change the buttons text so I ended up doing it later.)
13. Now that we are done editing the title, and the text below that, let's can change the button colours and style.
14. Click on the button, then click the colour, you can choose any colour that is there. You can also choose if you want the button filled in or not. Left button is filled in right is not.
15. Now we can align the title and the text now to center so it looks neater. To do that, hover over your header and you will see a settings icon, click it, then click align near the top and you can choose between right, left, or center.
16. Let's add a custom background image now for our header, to do that go back to step 15, and follow the steps to go to the settings menu, then scroll down till you find background, click image, then upload your background. After image is uploaded click ok, to close menu.
For step 17, we are just going to edit the button titles now cause I forgot to do that earlier. Click text to edit. We are also going to remove the filled in button and keep the clear button.
18. Now that we are finished with the homepage, let's add the discover page, then a footer, then we are done building our website!
19. Let's add a new page now, click the 3 lines in the top left of the app like you did in step 1, then click pages, then click create a new page, then when prompted to choose a template for the page choose add blank page. Afterwards you will need to name the page, then click the settings icon beside the duplicate icon, add rename page to discover or whatever your page name is.
21. Add a page header, then edit the texts, and background.
22. Click + in bottom right corner of the app (you will see it when you close this menu), after you click the + click the features tab, and now choose what you want to add.
23. Now let's customize this block, and add a link to the button. Click the button then change the text then click the link icon. Now replace https://mobirise.se with your link, in my case my twitter url.
24. Now that we have customized the block, let's make the footer. Click + then go to the footer tab.
25. Choose your footer, once clicked or dragged onto page, you will be prompted to add it to all pages, since this block is global which means it will show for all pages.
26. We can now modify the footer. To edit the text click the text, to change how many menu / social items are there, click the settings icon, then change the number to how many you want. (It's a slider so just slide right to increase and left to decrease, number will be shown above) Now that is the end of creating a basic website, now for the github part.
1. Firstly, let's change the site name, to do that. Click the site name below page name in top left corner, then edit the site name, and the fav icon as well. Toggle use menu logo, and choose the favicon you want to use for your site.
2. Now go to your browser, and then click me, and signup for a GitHub account. Follow all steps to create your account.
3. Once account is made you will be directed to this page, click start a new project.
4. When start new a project is clicked, you will be redirected to this page, go ahead and edit the project name, then click create repo.
5. Now go to desktop.github.com and download / install GitHub for desktop to your PC or Mac.
6. Sign-in with your GitHub account once you open the app, and follow the steps to setup the app.
7. Now time to clone our repo, right now no files are on the repo but soon we will have a fully working website! Click on clone a repo from the internet.
8. Now for local path choose where you want the github repo to be. (Remember the location as you need it in step 9)
9. Now, go back to mobirise and click publish, once clicked, choose local drive folder, then click browse then find your folder, and click open. Now click publish.
10. Now type whatever you want in the text box (where it says summary), then click publish, then click publish origin, and let github desktop do its thing.
11. Open your browser, then go to github.com, login to your acc, then go to your repo, then click Settings, then scroll down till you find Github Pages, click check it out here.
12. Now you will be taken to this page, simply click None, then main, then click save after, and boom! We are done!
Now go to your website, by clicking on the link shown. It will say "Your site is ready to be published at https://yourusername.github.io/yourreponame/"