Can You Customize Jekyll Blog Design Without Knowing Code

Is It Possible to Change Your Jekyll Blog Design Without Coding?

You like how Jekyll works, but you're not a developer. Maybe you’ve just forked the Mediumish theme, and now you're asking: **"Can I make it look more like me without writing code?"** The answer is: yes—especially if you know where to look and what to edit.

Jekyll themes like Mediumish are built for clarity. Even if you’ve never written a line of CSS before, you can still personalize your blog with just a few tweaks.

What Beginners Usually Want to Change First

The blog’s color scheme
The fonts and text size
The homepage layout (like post previews or images)
The logo or title style

All of these can be adjusted in Jekyll without writing code from scratch—just by **editing values** in the right files.

Start Here: The `main.scss` File in Mediumish

Every Mediumish-based Jekyll blog uses a main stylesheet: assets/css/main.scss. This is where colors, fonts, sizes, spacing, and layout rules are stored.

Open that file, and you’ll see something like:


// Typography
$font-family-base: 'Open Sans', sans-serif;
$font-size-base: 1rem;

// Colors
$primary-color: #3498db;
$text-color: #333;
$background-color: #fff;

Don’t panic. These are just **variables**. Change the value of $primary-color to another hex color, and you’ve just changed the main color of your site. No coding required—just edit and save.

Example: Changing the Blog Accent Color

Let’s say you want your blog to use a warmer tone instead of blue. You change this:

$primary-color: #3498db;

to:

$primary-color: #e67e22;

Now your links, buttons, and accents will use a warm orange tone. Simple.

How to Change Fonts Without Touching HTML

Mediumish already uses Google Fonts. You can change the base font by replacing the value in $font-family-base.

$font-family-base: 'Lora', serif;

Or switch to something classic:

$font-family-base: 'Georgia', serif;

You don’t need to “install” anything. Just paste a new font link in the head.html (found in _includes), and edit this SCSS variable.

Changing Layout Without Coding? Yes—Visually

If you want to change the structure of your homepage (like where thumbnails go, or what info is shown), open index.html or _layouts/home.html. You'll see:


<div class="post-meta">
  <span class="date">{{ post.date | date: "%b %d, %Y" }}</span>
</div>

Want to hide dates? Just remove that line. Want to move categories above the title? Move the {{ post.categories }} tag higher.

It’s not hard. Just read the tags like puzzle pieces—and rearrange them.

Logo, Title, and Branding for Beginners

To replace the blog title or logo:

Open _config.yml
Change title: to your blog name
If the theme uses a logo image, replace the file in /assets/img/

Now your branding is reflected across the site—automatically.

What If I Want More Design Control Later?

As you grow more confident, you can begin editing SCSS directly:

Create new style rules in main.scss
Learn about selectors like .post-title or .site-header
Override styles with !important if needed (though sparingly)

You’ll naturally begin to understand how the CSS cascade works. But there’s no pressure to dive in all at once.

Common Beginner Mistakes and How to Avoid Them

Editing the wrong file (e.g., changing style.css when the site uses main.scss)
Not clearing browser cache when checking visual changes
Forgetting to push changes to GitHub to see updates live

Visual Design Is Learnable—Jekyll Helps You Practice

Don’t think of yourself as “not a coder.” Think of yourself as a **visual editor with superpowers**. Jekyll gives you the environment to experiment with colors, spacing, layout, and typography. It gives you feedback instantly. It rewards curiosity.

Conclusion: You Can Shape Your Blog’s Look Without Knowing Code

Jekyll themes like Mediumish make it possible for beginners to take control of their design. You don’t need to “learn web development.” You just need the courage to open a file, try something new, and see what happens.

Labels

Archive