Which editor for editing themes?

Themes
1

Hi there - newbie here! I’m looking for the simplest code editor to make changes to the .hbs files within a theme?

Also, what’s the easiest way for me to ‘re-zip’ a file before re-uploading?

Thanks!

2

Hey,

I’m probably in the minority here, but I use Adobe’s open source Brackets as my code editor, supplemented with a few plugins.

About zipping, well, right-clicking on a folder should give you the option to zip it.

2 Likes
3

Hi,

my personal favorite is Visual Studio Code.

It’s by far the most used code editor, free and available for windows/mac/linux.
It might look a bit complicated for “newbies”, but it’s actually really easy.
It has a huge library of plugins, to help you with formatting (really helpful to keep consistent looking files with proper indentation, autocorrection, autocompletion, notification if you missed a bracket etc.) minifying, linting and so on.
You can also connect to your server over ssh in vscode and use git which is really handy.
Definitely worth a try…

Regarding zipping: Just use you’re preferred zipping program if you don’t already have one installed in your OS anyway.

I’d recommend you to set up a local development installation of ghost, so you can load up all your theme files in your code editor, work on them (save) and then just reload the page to see your changes, and if you’re happy with your customization, zip it up and upload to your live server.

3 Likes
4

thx, will take a look!

and facepalm - thank you, you’re right, I can just right-click and Zip. I recall having to download some sort of program (WinZip?) to zip files, apparently we’ve come a long way since then… haha.

5

thank you! when I googled ‘code editors’ there were so many, I had no idea where to start.

I have a developer (@dan) who has helped me self-host. I’m using one of his themes, too, which I just need to make some tweaks to using his helpful theme documentation. I just needed an editor, and it looks like I have a couple on this thread to check out. thx again.

6

update: I went for Visual Studio and liking it so far. thx @Stromfeldt & @daniel1 for your suggestions.

1 Like
7

If you’re using Mac, there’s only one worth mentioning. If you’re using Windows, there’s still only one worth mentioning.

3 Likes
8

haha wow, big words! The UX looks nice.

1 Like
9

It’s all I’ve ever used. Call me biased, but I love it. Although saying that, I do briefly remember using Brackets

1 Like
10

fair enough :slight_smile: I like your website’s design, btw, and that dark-mode toggle

1 Like
11

Thanks, this is a slightly modified version of weiss-pro by @eddiesigner

1 Like
12

nice. You might enjoy @dan’s stuff. If I decide to enable comments, I’m tempted by Cove > Disqus.

13

OMG, I remember this one! I used to use it a lot, lol.

These days, I float between:

And…

If I am in full swing of production, then I’ll end up using:

That’s the big brother of Code…

2 Likes
14

I used all the major editors on the market for a few weeks. I can say with certainty that sublimetext.com is by far the best.

The clean and clear interface, the lightning speed with which it opens make it unbeatable.

If you use Git, I also recommend that you try sublimemerge.com

2 Likes
15

Sublime looks nice and looks like it has a couple of votes. Looks like you have to pay though?

Visual Studio is serving my basic editing needs right now and it’s free :slight_smile:

16

I use and recommend Codelobster

17

Visual Studio Code

18

I personally prefer to use VS Code for most languages.

As for the easiest way to “re-zip” and upload. I don’t bother with this anymore as there’s a much easier way.

If you set up your theme as a GitHub repository (can be private), you can use this GitHub action to automatically push all your changes to your live website.

19

I do Ghost themes professionally and this is what I use.

Editor

Visual Studio Code as my main text editor.

Zip

I use gulp.js with gulp-zip to export the final zip file. My current Gulp zip task is something like.

gulp.task('zip', function () {
  return gulp.src([
    './**',
    '!node_modules/**',
    '!bower_components/**',
    '!.git/**',
    '!.DS_Store'
  ], { dot: true })
  .pipe(zip('NAME.zip'))
  .pipe(gulp.dest('../'))
  done();
});

So, with the gulp zip command, I can export the final theme file.

If you are not using gulp and want a simple command line to zip the theme, you can use something like.

zip -r NAME.zip NAME -x '*node_modules*' '*bower_components*'

What comes after the -x option is a way to exclude different directories or files. In this case, we are excluding the node_modules and bower_components directories from the final zip file.

Deployment

I use the Deploy Ghost Theme Github action. I wrote a step by step guide about it at Ghost Tips & Tricks #3 / Deploy Your Ghost Theme Using Github Actions

3 Likes
20

Did I say Brackets?

Yeah, uhh, don’t use that. Grab yourself VS Code and GitHub Desktop for all the code comparison functionality and git history, then deploy your Ghost theme with GitHub Action as Ahmad describes in the above comment. I made the switch over the weekend, and suffice to say… :fire:

1 Like