First Steps

Posted on Disqus:

We’ll assume you’re using a Windows PC

Now you can go about setting up your local environment a few ways but first we need to get your GitHub repository downloaded to your local PC.

  1. Go to GitHub and set up a new account if you don’t already have one. You’ll be wanting to create a new Repository or use one you’ve already made for this purpose.

  2. You’ll have a drop down option under the green “Code” button to open with GitHub Desktop, this is the easiest way

    Fig.1
    Open with GitHub Desktop

  3. GitHub Desktop will ask you where you want to save the repo etc, just make sure you know where it is as we’ll be referring back to this later. I’ll be using “D:\Github\reponamehere” as an example

  4. Now that we have your new empty website repository downloaded to your PC we need to actually get some software installed (yes, more) to get the website structure in place, remember we’ll be using Hexo for our demo.

  5. So here is where things start to get a bit more technical and we’ll be referencing to the “terminal” and “command line” a bit.

  6. We need an elevated powershell terminal to run the following command so you can usually just right click your Start menu and click PowerShell (Admin).

  7. We’ll be installing Microsoft’s Windows Subsystem for Linux as I find it much easier to run all the commands and programs we’ll be using for the website environment. Full documentation can be found at the Windows Subsystem for Linux website. If the below commands fail, you’ll have to investigate this issue and resolve it.

    NOTE if you are running Windows 11 you can skip to step 10 and install it directly via the Store.

    1
    wsl --install

  8. You should see several items download and install and finally it says the changes will take affect on next reboot. Reboot before we continue and get back into GitHub Desktop and Visual Studio Code

  9. After reboot the system will have you finish the Linux install.

  10. Open the Microsoft Store and search for Ubuntu, we actually need the 22.04 version (as of this writing, 07/23/2022).

    Fig.5
    Ubuntu 22.04

  11. The easiest way moving forward is to just work inside the Visual Studio Code app so with your new repo open in GitHub Desktop you can just click the “Open in Visual Studio Code” and we’ll start there.

    Fig.2
    Open in Visual Studio Code

  12. With Visual Studio Code open this is the layout you’ll see on a fresh repo:

    Fig.3
    Fresh Repo

  13. We want to open a terminal so hit CTRL + ` or click the Terminal menu and click New Terminal

  14. With the terminal open you’ll see a little + with down arrow, click this down arrow and select your new Ubuntu environment:

    Fig.4
    Ubuntu WSL

  15. In the new Ubuntu $ prompt you’ll have below we need to install a couple modules to power our new Hexo environment. Run each command in the terminal window.
    The commands explained:

    • the first two commands, apt update and upgrades fetches the latest package directory from the internet and installs them.
    • nodejs is the JavaScript runtime engine.
    • npm is essentially the online repository of packges we can install.
    • hexo-cli is the actual Hexo engine we need. 
      1
      2
      3
      4
      5
      sudo apt update
      sudo apt upgrade
      sudo apt install nodejs
      sudo apt install npm
      sudo npm install hexo-cli -g

  16. You can now verify you have hexo installed by using the following command

    1
    hexo -v

  17. You’re ready to initialize your new site!

  18. From terminal run (where ‘site’ is the folder you want)

    1
    hexo init site

  19. You’ll now see a whole bunch new files after a short install bar show up on the left explorer tab of Visual Studio Code

    Fig.6
    Files List

  20. Our next post will talk about actually creating content!

  21. I’d recommend committing your current site in GitHub Desktop and PUSHing it up to the cloud for a backup, we can always revert back to this state if needed.

    Fig.7
    Commit and Push
    Fig.8

–MrDigital