DEV Community: Andy

Make a pretty site, learn Jekyll: Tutorial

Andy — Tue, 16 Apr 2019 17:43:12 +0000

Trying to learn my way around GIMP the other day led me to Sirar Salih's developer blog.

I thought it looked SO GOOD:

Helpfully, Sirar links to the original theme on his page: Hydejack, built with Jekyll and hosted on Github pages. Obviously, I had to try it myself.

Here's my working version:

For some helpful tips and a better how-to than what you'll find elsewhere, read on.

Installation

The Hydejack site gives several installation options.

I don't know much about Ruby/gems, so I didn't go that route. Going the zip file route just sounded messy, and I've been known to mix up my git clone and my git fetch.

That left installing via starter kit, which gives you a decent quick start guide in its ReadME.

I elected to start by setting up my GitHub pages site, just because it sounded the easiest, but I had to change a few of the steps:

Fork the hydejack starter repo.
Go to the Settings tab in your new repo. Rename the repository.
Still in Settings, scroll down to GitHub pages.
Set source to master branch
Copy the URL this generates.
Go back to the code (still in GitHub). Open the _config.yml file.
Uncomment the url line and replace the url with your new GitHub page.
Uncomment the baseurl line and replace with the repository name in single quotes.
Commit the changes.
To see the site, go to the GitHub pages URL.

Running Jekyll locally

Now, I did all of this before I had my own local copy of the site. So it was satisfying to see the blog theme immediately live and hosted, but is obviously not ideal for development. Onward to setting up local development.

Create a new directory on your computer where your project will live.
cd into your new directory.
Run git clone [YOUR_PROJECT_REPO] (NOTE: I didn't have to git init in the folder before cloning, which surprised me)
cd into the root directory (which is where you _config.yml file is stored.
Run bundle install (NOTE: this requires Bundler. If you don't already have it, run gem install bundler)
Run bundle exec jekyll serve
To visit the site, go to localhost:4000
To start developing, open this project directory in your code editor of choice

Now, a note about the local site: although the jekyll server continues running as you make changes in your code base, I have had to stop and restart the server for changes to take effect. I need to research more to find out if there's a way for the jekyll server to be watching for changes and update accordingly.

Digging into the development

I ran through the HydeJack Configuration page to start customizing my website, and it's great.

But, I started to notice that there were some files and folders in my GitHub repo that weren't in my local copy. What's the deal?

Well, the .gitignore file includes the _site folder. Which, you know, contains pretty much the whole site.

I commented out that line so that I could get into the meat of those pages.

~UPDATE~*~

So guys, the _site file is what gets built when you run the Jekyll server. If you try to put anything in there, it will be deleted when you build. So, keep that shiz in your .gitignore.

Resources 'n learnin

I didn't know anything about Jekyll before starting this site. And honestly, not a lot of great resources out there on it. A lot of the videos and articles I found are from 4 or 5 years ago, which makes me feel like Jekyll is a little passe?

In any case I liked this video for an intro:

Just like HydeJack is free to use, there are a bunch of other Jekyll themes out there!

Go to this link to peruse a bunch of free and paid options.

Finally, for the pared-down intro to Jekyll for blogging, check out this dev post:

Getting Started with Jekyll

Jarret Bryan ・ 4 min read

#codenewbie #jekyll #githubpages #ruby

Nevertheless, Andy Coded: Vocabulary list from my first weeks as a dev

Andy — Thu, 07 Mar 2019 15:00:46 +0000

I started my first developer job three weeks ago. As my boss told me it would, the process has felt like trying to drink from a fire hose.

I'm fine. This is fine.

There has been a lot to learn and it can be paralyzing. Sometimes I don't even know the words I need to ask the right questions.

So, I've been keeping track of all the vocabulary I've learned these last few weeks. In this post you'll find my working definitions of these concepts and the best resources I've found explaining them. I thought this would make an appropriate women's day post because LOOK AT ALL THESE THINGS I DON'T KNOW YET. And nevertheless, I coded.

1. Packages

In web dev world, there are a lot of words for "units of stuff." Other examples include "modules" and "bundles" and "crying jags" (units of developer frustration; used in a sentence: I was sent into 1.2 crying jags when searches for "what is a web development package" turned up nothing but video game results).

My working definition: a chunk of code someone else made that I can use.

For a better and more in-depth explanation, I liked this post by @shubheksha:

An introduction to how JavaScript package managers work

Shubheksha Jalan ・ Feb 8 '18

#webdev #programming #node #javascript

2. Dependencies

Someone asked me this week if I had experience with injecting dependencies. And I was like,

I'm not crying, you're crying.

The answer is, how shall I say...no.

My working definition: programs needed by programs I need in my web app. Clear as crystal.

I gleaned that info from this post in the askUbuntu help forum in Stack Exchange.

But for sheer catchiness of the title, my runner-up resource was Code Dependencies Are the Devil by Bill Sourour.

3. Observables

My working definition: An observable thing. Insightful!

I'll have to defer to Netanal Basel on this one. Check out his article, JavaScript - Observables Under the Hood.

4. Databinding

This came up when I took PluralSight's Angular: Getting Started course, which, fun fact, is narrated by Siri (at least that's how soporific Deborah Kurata's voice is).

My working definition: Being able to declare a thing somewhere and call it somewhere else.

Matan Lurey says it with much more eloquence: "Data binding, or updating the view (usually UI) from your application’s code is probably the holy grail of browser-based web frameworks." Check out his article, Building data binding in the browser.

5. Alias

One of my first tasks as a developer was to get AEM installed.

If there's something that scares me about web development, it's having to type long, strange commands into Terminal. I press enter while preying to Odin that I didn't just tell my computer to spontaneously combust.

A thing about installing AEM if you didn't already know it: the process is long, strange, and involves a million command line prompts. About halfway through my second day (OF THREE!) of installing AEM, one of my coworkers suggested I write some aliases to help myself with the process.

My working definition: Assuming the identity of an experience web developer to help me through feelings of inadequacy.

The better definitions and explanations can be found here: A developer's guide to using aliases.

And here: 7 super useful aliases to make your development life easier.

6. Bootstrap

In a stunning turn of events, something in web developer land is more confusing than it needs to be! Imagine my surprise when I learned that Bootstrap doesn't just refer to the prettifying code library.

My working definition: A program that runs itself.

For the best explanation, check out this Stack Overflow post from the Dark Ages (2009):

7. SPA

My working definition: Single Page Application.

The most soothing of the acronyms I've experienced so far (the least soothing award must rest with SCORM).

8. Webpack

I've been shadowing a team working on a web app that's been written with Angular. One of their big long-term projects is to move everything into React. In a meeting with the main dev in charge of that, the answer to every question seemed to be "because webpack."

Best resource here [EDIT]

I also really enjoyed @areknawo's recent post about setting up a Webpack config file:

How to setup Webpack config 📦

Arek Nawo ・ Jan 31 '19

#javascript #webpack #webdev

This vocab list could be about 1,000 entries longer but I think I'll leave it here. To summarize: coders aren't joking when they throw around phrases like "life-long learning." I'm excited and daunted to keep up this career of frantic googling I've chosen.