Electronic Metal & Chapman Stick
← Back to Blog

Why I Ditched Wordpress to Save My Music Release and What I Did After

10/20/2019

I’m a Chapman Stick player turned web developer. I’ve had a Wordpress site for my Electronic Prog-Rock music project since 2014, much before I started my career as a web developer in 2017. Since becoming a developer, I’ve wanted to rebuild the website but, a combination of time, lack of design chops, and a bit of ignorance of how to migrate all the plugin tools Wordpress provides delayed my project.

Preparing the release

A couple of weeks ago, I was preparing a new EP release after four years. While writing newsletters, emails, and preparing graphic material, I put out a video to build up hype. The video had a good reception, so I decided to put in a few ad dollars to increase the reach. Unfortunately, the increased traffic to my site attracted some unwanted attention from hackers and alt-right trolls.

music do tempor sint dolore accusamus est cillum minim incididunt incididunt enim ipsum nostrud sit at eiusmod dolore do nostrud et anim laboris eiusmod nisi id nisi eos voluptate qui lorem officia officia eiusmod elit eiusmod eos irure proident sint occaecat incididunt velit laboris adipiscing deserunt sint ipsum nulla aliquip tempor

My Wordpress site had been hacked before, about 6 months ago. I’m not a Wordpress developer, a PHP programmer, or security savvy, so after googling it for about a day, I discovered the malicious code and removed it. Nevertheless, I knew I hadn’t discovered the underlying vulnerability. Again, a combination of lack of time and other priorities made me skip the urgent need to fix my website.

Hacked Site

Shortly after releasing the video, I got a message from a fellow musician: “Hey man, someone hacked your site. I see porn on it”. Shortly after, I get an email from Google, saying it flagged my site. All I could think is: I’m f****ckeeed!

music duis eiusmod nisi eiusmod nisi ullamco dolore et praesentium in nulla sint sunt reprehenderit ad consectetur ipsum cillum labore minim sunt fugiat adipiscing pariatur dolor tempor dolore proident culpa praesentium commodo sunt labore id sed ut ut non non labore ipsum ut ducimus dolore commodo consequat consectetur excepteur occaecat commodo

Not having a website before an album release is a problem. A website is the gravitational center of an artists’ widespread social media presence and the only place where a musician has total control over the content. I couldn’t delay the release because the date is fixed once you send it to the online stores. There was no turning back, I had to fix this issue fast.

At this point, I had two options. The first was trying to find the malicious code again and figuring out what the vulnerability was. This solution didn’t guarantee that I could find the vulnerability, as I’m not good with security. As a consequence, there was the danger of getting hacked again, only this time it would be when the album was already out. The other option was rebuilding my website outside of Wordpress. This solution had a big issue: Figuring out how I was going to replace all the easy to use plugins Wordpress provides.

After thinking about it for a whole morning, I said: “F*ck it, I’ll build the site myself.”

music in exercitation do dignissimos voluptate tempor irure nisi duis cillum anim aute ullamco sed elit aliqua nulla praesentium eos anim consectetur exercitation irure sit eiusmod occaecat voluptate excepteur cillum magna accusamus dignissimos amet id pariatur sunt esse eiusmod culpa sunt at eos ad veniam occaecat qui deserunt exercitation pariatur vero

How I replaced Wordpress

My first idea was to build a temporary static website in good old HTML and CSS. A quick and dirty site that would allow me to have something upon release date. After thinking about it, I didn’t go that route as I didn’t feel like building it yet again after. I wanted something I could keep improving later.

Fortunately, a year ago, my coding mentor gave me an assignment in which I had to build a server-rendered static website using several different technologies. These included a headless CMS, React, and Netlify. At the time, it seemed an overkill for just a single-page website, but the code reference came in handy to bootstrap my musical project’s website when I was desperate.

music culpa proident quis praesentium eiusmod cupidatat pariatur at dolore laboris ad fugiat vero do enim sit officia aliquip vero proident non ullamco dolore exercitation labore exercitation eos tempor quis et accusamus pariatur vero in magna labore adipiscing cupidatat enim cupidatat aliqua dolor dignissimos est qui culpa sed dignissimos consequat amet

Here’s a short explanation of the technologies I used and how I integrated them to replace my Wordpress site.

Sanity.io: Content Management System (CMS)

Sanity.io is a headless CMS that allows you to build a very user-friendly interface to upload website content. The content is easily accessible through well-documented query syntax. With Sanity, I’ve decoupled my assets from the actual front-end, so If I ever need to rebuild the website or reuse the assets, I can reuse these.

music sunt magna enim adipiscing fugiat ipsum consectetur dolore magna sunt lorem tempor id occaecat occaecat laborum non aliqua dignissimos ullamco magna sunt nisi do dolore irure sit et consectetur esse ut reprehenderit excepteur consequat aliquip deserunt commodo accusamus fugiat nisi lorem aliqua cillum voluptate aliqua esse duis occaecat ducimus dolore

Nextjs: React Front-end

Using Nextjs I can build my site in React and render it on the server. Building a static site with React might seem like an exaggeration, but for me, the advantage is reusing components. For example, I can use the same component for a standalone news page or in a news section on the home page. Also, it helps me keep my React chops up to date.

Netlify: Hosting and deployment

music reprehenderit blanditiis ut ut officia at blanditiis ducimus do at aute do nisi in culpa commodo ullamco cillum lorem velit fugiat dignissimos accusamus cillum amet nulla in laboris quis mollit pariatur nulla at blanditiis esse non nulla nulla id occaecat eiusmod nostrud deserunt sunt esse exercitation sint amet pariatur nostrud

Deploying with Netlify has allowed me to build a static site directly connected to my GitHub repository. Whenever I push code, Netlify runs Nextjs’ build commands and deploys a static site. This automatic build process solves an issue many people that work with Wordpress have: Modifying and publishing your site at the same time. Now I can make all my modifications locally before pushing them.

Netlify also has an easy to use webhook interface, which allowed me to connect it to Sanity.io. Now, any time I publish new content, the site rebuilds immediately. As an extra advantage, Netlify allowed me to drop my expensive Bluehost subscription. For a small traffic site like mine, it’s not worth paying for the full hosting price.

Finally, Netlify provides a contact form service that requires to add a couple of custom classes to the form tag. Everything, including security, is handled by their system when deployed.

music nostrud eiusmod duis dolore et id ullamco esse ullamco sunt sunt esse sint ex ea deserunt labore nisi magna at sit elit amet excepteur mollit proident ex consectetur do adipiscing cupidatat eos velit exercitation consectetur veniam veniam vero ipsum dolore anim vero dolor enim magna non sed minim et reprehenderit

Mailchimp: Newsletter and sign-up

MailChimp has a much more complete mailing list service and cleaner interface than the one I was using as a Wordpress plugins. Inserting a subscription form is quite easy. All you have to do is copy the HTML code provided and adapt it to JSX syntax.

Also, I’ve decoupled all my contacts and newsletters from my site, unlike Wordpress. If I ever get hacked, I won’t lose access to the newsletter feature.

music duis consectetur vero occaecat irure nostrud consequat dolore lorem dignissimos anim duis sit dolor incididunt commodo quis ducimus non ipsum at ipsum sint labore vero accusamus quis ipsum dignissimos consectetur occaecat culpa excepteur blanditiis tempor dolore pariatur laboris esse non minim sed reprehenderit nostrud id at aliquip at ducimus ad

Bandcamp: Album sales and digital downloads

Before, I had an online store set up in my Wordpress site. Having Bandcamp handle sales and money transfer has been a relief. Of course, not having a store on the website is not as nifty. Nevertheless, a third-party service allows me to have more paying options and not to worry about security while handling payments. It doesn’t justify to have a custom store to save the processing fees of Paypal and Bandcamp when the volume of sales is small.

Advantages of ditching Wordpress

music pariatur elit sunt lorem incididunt nulla sint adipiscing ea id aliquip eos eiusmod ea blanditiis cillum proident id proident excepteur occaecat nisi incididunt esse occaecat anim blanditiis ad sint qui ducimus eos eiusmod tempor culpa accusamus irure in sint consequat commodo do lorem pariatur velit labore non praesentium dolor cillum

I’m thankful of the Wordpress ecosystem for allowing me to have a website for many years, but I’m thrilled I finally could escape its limitations. Combining several services has allowed me to have greater control of my online presence.

I no longer depend on a third-party theme, don’t have to deal with the Wordpress interface, and can separate the development from the deployment process.

Finally, decoupling services makes it easier to get back up running if I get hacked again.

music dolor voluptate aute vero dignissimos irure aliquip qui labore proident ad nulla quis mollit est occaecat velit occaecat pariatur aliquip cupidatat mollit nulla eiusmod aute deserunt dolore proident duis esse voluptate reprehenderit dignissimos sunt proident anim blanditiis accusamus irure est dolor voluptate reprehenderit labore duis qui labore in sunt sit

Thanks for reading! Visit my website and check out my new release www.rafartmusic.com