How to Add a Blog to Your Wix Website and Edit JavaScript via Velo

Editing elements like a journal or blog on your Wix site is easy as all hell! All you have to do is go to the Velo code editor. Provided you either know web design or how to do basic programming, you can select the slide-up Velo menu, or you can use Wix’s no-code Editor. In this tutorial, I will show you how to do it with both. Graphical Editor Using the graphical editor is incredibly simple! The menu has an inbuilt blog for you to add to your site, it is managed by Wix and you can submit your blogs using Wix’s dashboard. As seen below, it’s just as easy to manage as it is to post, conveniently on a single button set! The ease of use in this case is very helpful for budding bloggers and vloggers alike, as it allows for video blogging too! You can upload images, as can you video. It is definitely something that would be useful for someone who cannot code in JavaScript well, such as myself. I give the graphical editor a 10/10. Editing JavaScript Code with Velo To be honest, I can barely make a calculator in JavaScript. But I searched the seas of Stack, looked under the islands of Google, and lifted the lid of Oracle’s scripting language. I did not find a definite solution, however I did find articles for react.js and the like. If you can use JavaScript, you will know how to do this. I’ll tell you what I know about it, however, in case for some reason I can do it better than someone who studies it rather than my puny front-end languages. Firstly, bring up the Velo code editor. Type the American dollar sign, this brings up a list of elements on the page. Add a blog using the GUI, this will be your template. Now, you can modify the JS of this element to your needs, again, I don’t know how to add 1+1 in JS, so I'll leave that to you. You wouldn’t need to follow a tutorial if you choose to use the inbuilt JavaScript editor, though again, I will offer my maximum help with this. Any animations for your blog can be handled using easily googleable variables, I recommend using animations similar to Microsoft Fluent’s design language, as it is both minimalistic and complex at the same time.. If you would like to do it anyway without Velo and then port it to Velo, you can use this block of code: INDEX.JS ( ).config(); express = ( ); path = ( ); cors = ( ); bodyParser = ( ); session = ( ); { ExpressOIDC } = ( ); app = express(); port = ; app.use(session({ : process.env.RANDOM_SECRET_WORD, : , : })); oidc = ExpressOIDC({ : , : process.env.OKTA_CLIENT_ID, : process.env.OKTA_CLIENT_SECRET, : process.env.REDIRECT_URL, : , : { : { : , : } } }); app.use(oidc.router); app.use(cors()); app.use(bodyParser.json()); app.get( , (req, res) => { res.send( ); }); app.listen(port, () => .log( )) require 'dotenv' const require 'express' const require 'path' const require 'cors' const require 'body-parser' const require 'express-session' const require '@okta/oidc-middleware' const const 3000 // session support is required to use ExpressOIDC secret resave true saveUninitialized false const new issuer ` /oauth2/default` ${process.env.OKTA_ORG_URL} client_id client_secret redirect_uri scope 'openid profile' routes callback path '/authorization-code/callback' defaultRedirect '/admin' // ExpressOIDC will attach handlers for the /login and /authorization-code/callback routes '/' ' Welcome!! ' console `My Blog App listening on port !` ${port} PACKAGE.JS : { : , : }, "scripts" "start" "nodemon index.js" "test" "echo \"Error: no test specified\" && exit 1" Run then go to and you should see: npm start http://localhost:3000/ BACK TO INDEX.JS Replace: app.get( , (req, res) => { res.send( ); }); '/' ' Welcome!! ' With: app.get( , (req, res) => { res.send( ); }); app.get( , (req, res) =>{ res.send( ); }); '/home' ' Welcome!! Login ' '/admin' 'Admin page' Now, when you visit , you should see the login link. http://localhost:3000/home oidc = ExpressOIDC({ : , : process.env.OKTA_CLIENT_ID, : process.env.OKTA_CLIENT_SECRET, : process.env.REDIRECT_URL, : , : { : { : , : } } }); const new issuer ` /oauth2/default` ${process.env.OKTA_ORG_URL} client_id client_secret redirect_uri scope 'openid profile' routes callback path '/callback' defaultRedirect '/admin' In our application set up, we provided as the URL in the setup, so now you should see the admin page. /admin defaultRedirect ExpressOIDC Add to the route, so if someone gets the link, he/she still can't see the page without logging in. oidc.ensureAuthenticated() /admin app.get( , oidc.ensureAuthenticated(), (req, res) =>{ res.send( ); }) '/admin' 'Admin page' Add the following routes after get('/admin', …), so the user can log out and when they visit other unexpected pages, we will redirect them back to home page. app.get( , (req, res) => { req.logout(); res.redirect( ); }); app.get( , (req, res) => { res.redirect( ); }); '/logout' '/home' '/' '/home' You've now got an app built using Express.js and Okta (for OIDC), so let's move on to the next step... Now host! Thanks to Macy Ngan on scotch.io, they provided a great tutorial for people like me who don’t know JavaScript well; this can be hosted on Wix. You can check out the sample blog I set up here. This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to and take a shot at winning , from March 1st, 2021 to May 31st, 2021. enter here $1000 every month